div hover 显示按钮/链接效果
[英]div hover show button/link effect
问题描述
here's the effect: when i move my mouse to the div, a delete link will show up.
效果如下：当我将鼠标移到 div 上时，会出现一个删除链接。 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.在萤火虫中，我可以看到当我 hover div 时删除链接的样式发生了变化。 but can someone tell me how to control this?但有人能告诉我如何控制吗？
4 个解决方案
解决方案1
3 2011-05-03 15:04:35
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.根据您的进步程度（支持 IE > 6），您可以在 CSS 中通过使用父级的hover伪 class 创建选择器来执行此操作。 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/看看它在行动 - http://jsfiddle.net/7msZA/
If you want effects or have cross-browser concerns then JavaScript is the alternative.如果您想要效果或有跨浏览器问题，那么 JavaScript 是替代方案。 However, these days CSS is perfectly capable of handling this sort of UX.然而，如今 CSS 完全有能力处理这种 UX。
解决方案2
2 已采纳 2011-05-03 15:08:21
As you see in your images, it's probably done with jQuery, a JavaScript library.正如您在图像中看到的，它可能是使用 JavaScript 库 jQuery 完成的。
The code's quite simple:代码很简单：
HTML : HTML ：
<div>
Foo
<span class="delete">Delete</span>
</div>
JavaScript : JavaScript ：
$('div').hover(function() {
$(this).find('.delete').show();
}, function() {
$(this).find('.delete').hide();
});
CSS : 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/演示： http://jsfiddle.net/euChd/3/
解决方案3
1 2011-05-03 15:05:43
This is most likely done through Javascript, or jquery.这很可能通过 Javascript 或 jquery 完成。
An example of how this is done could be something like this:如何做到这一点的一个例子可能是这样的：
document.getElementById('div1').onmouseover = function() {
document.getElementById('div1').style.display = "inline";
}
解决方案4
1 2011-05-03 15:07:56
You can do this with Javascript, I would suggest JQuery .你可以用 Javascript 来做到这一点，我建议JQuery 。 This JQuery page has an example of changing styles based on hover.此 JQuery 页面有一个基于 hover 更改 styles 的示例。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.