0

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

http://jsfiddle.net/2c42U/

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

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

6 回答 6

10

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

.foo:hover {
    opacity:0;
}
于 2013-03-12T20:02:52.073 回答
3

试试这个而不是 display:none

visibility:hidden
于 2013-03-12T20:04:05.097 回答
1

试试这个：

.foo:hover {
    opacity: 0;
}

您对此的最终意图是什么？

于 2013-03-12T20:04:23.633 回答
1

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

另外，要倒退，即执行以下操作：

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

您还可以添加一个过渡：

transition: 0.5s

所以它不是即时的。

于 2013-03-12T20:06:28.013 回答
1

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

使用这样的 CSS：

.hidden{
    display: none !important;
}

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

于 2013-03-12T20:09:03.407 回答
-2

我认为 css 行不通。使用 jQuery

更新

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

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

固定的

     $('#outer').mouseenter(function() {
       $("#outer").slideUp();
     }); $('#outer').mouseleave(function() {
       $("#outer").slideDown();
     });
于 2013-03-12T20:02:30.170 回答