Question

这是效果：当我将鼠标移动到div时，将显示删除链接。当我移出鼠标时，删除链接消失。

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

enter image description here

Answer 1

根据你的进步程度（支持IE＆gt; 6），你可以通过创建一个父类hover伪类的选择器在CSS中完成。使用屏幕截图中的相同标记：

a.deleteFiddle {
  display: none;
}

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

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

如果您想要效果或有跨浏览器问题，那么JavaScript就是替代品。但是，现在CSS完全有能力处理这种用户体验。

Answer 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/

Answer 3

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

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

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

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

div悬停显示按钮/链接效果

4 个答案: