Edit link on div mouseover

Question

On facebook for example - when you put your mouseover a news item, a remove button appears. How can I go about making this happen?

Thanks, Elliot

Answer 1

Modern Browsers

In modern browsers, you can leverage the :hover pseudo class in our selector. As an example, consider the following markup:

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

By default, we would want the .adminControls to be hidden. They should, however, become visible once the user has hovered the .item element:

.item .adminControls {
    display: none;
}

.item:hover .adminControls {
    display: block;
}

JavaScript and jQuery

If you're using jQuery, you can accomplish this rather easily using the $.hover() method. If you're using Prototype, you can get the protoHover plugin to achieve the same result, or view this blog post.

$("div.item").hover(
  function () { $(this).find(".adminControls").show(); }, 
  function () { $(this).find(".adminControls").hide(); }
);

That would accomplish the show/hide effect for the following:

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

<div class="item">
  <p>This is a long string of text</p>
  <div class="adminControls">
    <a href="#" title="Delete">Delete Item</a>
  </div>
</div>

Answer 2

If you don't need to support IE6, you can use the :hover pseudoclass like so:

CSS:

.link { display: none; }
.item:hover > .link { display: inline; }

HTML:

<div class="item">
  <a href="#" class="link">Remove</a>
  Lorem Ipsum...
</div>