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?
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?
Share Improve this question edited May 3, 2011 at 16:23 user147373 asked May 3, 2011 at 14:58 sbssbs 4,1526 gold badges43 silver badges56 bronze badges4 Answers
Reset to default 3Depending 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/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.
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/euChd/3/
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";
}
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./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>