CODEWITHSUNDEEP
javascripthtmlhover
sbs
sbs

Reputation: 4152

div hover show button/link effect

here's the effect: when i move my mouse to the div, a delete link will show up. when i move out the mouse, the delete link disapper.

in the firebug, i can see that the delete link's style changes when i hover the div. but can someone tell me how to control this?

enter image description here

enter image description here

Upvotes: 1

Views: 5187

Answers (4)

Jason McCreary
Jason McCreary

Reputation: 72991

Depending on how progressive you are (Support IE > 6), you could do it in CSS by creating a selector with the hover pseudo class of the parent. Using the same markup from your screenshots:

a.deleteFiddle {
  display: none;
}

div.lfiCont:hover a.deleteFiddle {
  display: inline;
}

See it in action - http://jsfiddle.net/7msZA/

If you want effects or have cross-browser concerns then JavaScript is the alternative. However, these days CSS is perfectly capable of handling this sort of UX.

Upvotes: 3

Blender
Blender

Reputation: 298196

As you see in your images, it's probably done with jQuery, a JavaScript library.

The code's quite simple:

HTML:

<div>
    Foo
    <span class="delete">Delete</span>
</div>

JavaScript:

$('div').hover(function() {
   $(this).find('.delete').show();
}, function() {
   $(this).find('.delete').hide();
});

CSS:

.delete {
    position: absolute;
    top: 0px;
    right: 0px;
    color: red;

    display: none;
}

div {
    padding: 50px;
    background-color: rgb(200, 200, 255);
    position: relative;
}

Demo: http://jsfiddle.net/euChd/3/

Upvotes: 2

user147373
user147373

Reputation:

You can do this with Javascript, I would suggest JQuery. This JQuery page has an example of changing styles based on hover.

The code example from that page is:

<!DOCTYPE html>
<html>
<head>
  <style>
  ul { margin-left:20px; color:blue; }
  li { cursor:default; }
  span { color:red; }
</style>
  <script src="http://code.jquery.com/jquery-git.js"></script>
</head>
<body>
  <ul>
    <li>Milk</li>
    <li>Bread</li>
    <li class='fade'>Chips</li>

    <li class='fade'>Socks</li>
  </ul>
<script>
$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);



//li with fade class
$("li.fade").hover(function(){$(this).fadeOut(100);$(this).fadeIn(500);});

</script>

</body>
</html>

Upvotes: 1

Joe
Joe

Reputation: 137

This is most likely done through Javascript, or jquery.

An example of how this is done could be something like this:

document.getElementById('div1').onmouseover = function() { 
    document.getElementById('div1').style.display = "inline";
}

Upvotes: 1

Related Questions