div hover 显示按钮/链接效果答案

【问题标题】：div hover show button/link effectdiv hover 显示按钮/链接效果
【发布时间】：2011-05-04 00:23:49
【问题描述】：

效果如下：当我将鼠标移到 div 上时，会出现一个删除链接。当我移出鼠标时，删除链接消失。

在萤火虫中，当我将鼠标悬停在 div 上时，我可以看到删除链接的样式发生了变化。但是有人能告诉我如何控制吗？

【问题讨论】：

【解决方案1】：

根据您的进步程度（支持 IE > 6），您可以在 CSS 中通过使用父级的 hover 伪类创建选择器来实现。使用屏幕截图中的相同标记：

a.deleteFiddle {
  display: none;
}

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

查看实际操作 - http://jsfiddle.net/7msZA/

如果您想要效果或有跨浏览器的问题，那么 JavaScript 是替代方案。然而，如今 CSS 完全有能力处理这种 UX。

【讨论】：

【解决方案2】：

正如您在图片中看到的，它可能是使用 jQuery（一个 JavaScript 库）完成的。

代码很简单：

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;
}

演示：http://jsfiddle.net/euChd/3/

【讨论】：

【解决方案3】：

这很可能是通过 Javascript 或 jquery 完成的。

如何做到这一点的一个例子可能是这样的：

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

【讨论】：

【解决方案4】：

您可以使用 Javascript 执行此操作，我建议 JQuery。 This JQuery page 有一个基于悬停改变样式的例子。

该页面的代码示例是：

<!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>

【讨论】：