CSS - display：none on hover self

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

http://jsfiddle.net/2c42U/

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

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

来源

2013-03-12 Jon

您无法使用'display：none'隐藏悬停元素。它不起作用，因为它没有意义。 – dfsq 2013-03-12 20:02:11

你的意思是你不能给'display：none;'应用自己？ – Jon 2013-03-12 20:03:00

你可以，但它不会工作。想想接下来会发生什么？ Div消失了，如果它再次出现，因为它没有徘徊？这就是为什么它什么都不做。 – dfsq 2013-03-12 20:03:31

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

.foo:hover { 
    opacity:0; 
}

来源

2013-03-12 20:02:52

甜！我非常在意试图隐藏元素，我忘记了让用户认为元素被隐藏起来！ – Jon 2013-03-12 20:03:59

@ icu222much确保你在各种版本的IE中检查。它需要“alpha-opacity”而不是仅仅是不透明。 – VoidKing 2013-03-12 20:11:13

-2

我认为CSS将无法正常工作。使用jQuery

UPDATE

喔，是我不好。 CSS将工作，但jQuery将有更好的效果

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

固定

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

来源

2013-03-12 20:02:30

WRT“css会工作，但jQuery会有更好的效果” - 它是如何更好的效果？ – 2013-03-12 20:18:08

.slideUp（）.slideDown（）.slideToggle（）就是我的意思，我弄糊涂了grr。对不起 – 2013-03-12 20:35:24

'＃外部'是什么？此外，即使您的更新解决方案表现奇怪：http://jsfiddle.net/XtmVQ/3/ – 2013-03-13 00:35:14

尝试，而不是显示这样的：无

visibility:hidden

来源

2013-03-12 20:04:05 TrippinBilly

这也起作用:) – Jon 2013-03-12 20:04:52

试试这个：

.foo:hover { 
    opacity: 0; 
}

什么是你为这最后的意图是什么？

来源

2013-03-12 20:04:23

为@Richard说，使用不透明

也，是倒退，即，具体操作如下：

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

，你还可以添加一个过渡：

transition: 0.5s

使它不是即时的。

来源

2013-03-12 20:06:28

你可以做别人建议的，使用opacity: 0;或visibility:hidden;，但是如果你必须让它隐藏在页面的流程中。然后执行以下操作：

使用CSS这样的：

.hidden{ 
    display: none !important; 
}

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

来源

2013-03-12 20:09:03 sweetamylase

CSS - display：none on hover self

回答

相关问题