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

You need to dynamically manipulate the DOM tree using JavaScript. A search along those lines should give you what you're looking for.

Answer 2

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("div.adminControls").show(); }, 
  function () { $(this).find("div.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 3

Position the link as you'd like it to appear on hover, then hide it with JavaScript and use the onmouseover event to show it. (i.e., it's display: none; and then turns to display: block; when the onmouseover event is triggered).

Something like this:

window.onload = function(){
    document.getElementById('mylink').style.display = 'none';
    document.getElementById('mydiv').onmouseover = function(){
     document.getElementById('mylink').style.display = 'block'; 
    }
}

Answer 4

You need to write a Javascript function that manipulates the DOM and you need to associate the OnMouseOver attribute of your HTML element with that function. For example, on my home page a picture of my face changes every time the mouse rolls over it. The Javascript function is defined in the HTML page itself.

<script type="text/javascript">
<!--
faceCnt = 7;
var faces = new Array( faceCnt ); 
var faceDates = new Array( "1982", "1986", "1991", "1999", "2004", "2006", "2009" );
var faceIdx = 7; /* So that first change is to earliest one. */
for( var idx = 0 ; idx < faceCnt ; idx++ )
  (faces[idx] = new Image(150, 116)).src = "david/david" + (idx + 1) + ".jpg";

function nextFace( ref )
{
  faceIdx = faceIdx >= faceCnt - 1 ? 0 : faceIdx + 1;
  ref.src = faces[ faceIdx ].src;
  ref.title = "David-" + faceDates[ faceIdx ];
}
//-->
</script>

<img id="myface" src="david/david7.jpg" alt="david" title="David-2009" 
 width="150" height="116" 
 style="margin: 0 0 5px 15px; /* -10px -5px 10px 10px; */
  padding: 0;
   border: solid black;
   border-width: 1px;
   float: right;" 
  onMouseOver="nextFace( this )"
  onClick="nextFace( this )" >

Answer 5

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>