Question

我正在尝试创建一种效果，如果用户将鼠标悬停在某个元素上，该元素就会消失。我已经尝试了下面的代码，但似乎display:none;打破了CSS。我想知道为什么我的CSS不起作用，以及我如何解决我的问题。

<div class="foo">text</div> 

.foo:hover {
    color: red;
    display: none;
}

Answer 1

尝试更改元素的不透明度：http://jsfiddle.net/XtmVQ/

.foo:hover {
    opacity:0;
}

Answer 2

试试这个而不是display：none

visibility:hidden

Answer 3

试试这个：

.foo:hover {
    opacity: 0;
}

你最终的目的是什么？

Answer 4

正如@Richard所说，使用不透明度

同样，向后退，即如下：

filter:alpha(opacity=0); /* For IE8 and earlier */

您还可以添加转换：

transition: 0.5s

所以它不是即时的。

Answer 5

您可以执行其他人建议的操作，使用opacity: 0;或visibility:hidden;，但是如果您必须将其隐藏在页面流中。然后执行以下操作：

使用这样的CSS：

.hidden{
    display: none !important;
}

您可以使用类hidden并将其应用于任何元素以隐藏它。对于您想要的悬停行为，您需要JavaScript / jQuery来应用类名。见http://jsfiddle.net/rkH7F/

Answer 6

我认为css不起作用。使用jquery

<强>更新

哦，我的坏。 css会起作用，但jquery会有更好的效果

     $('#outer').mouseenter(function() {
       $("#outer").hide();
     }); $('#outer').mouseleave(function() {
       $("#outer").show();
     });

<强>固定

     $('#outer').mouseenter(function() {
       $("#outer").slideUp();
     }); $('#outer').mouseleave(function() {
       $("#outer").slideDown();
     });

CSS - 显示：无悬停自我

6 个答案: