Question

<p>im a duck</p>

p:hover {
    display:none;
}

悬停后它不应该消失吗？

Answer 1

确实消失了。

然而，在它消失后，它不再徘徊，所以它重新出现。

每次移动鼠标时，循环都会重复;如果你将鼠标移到它上面，你会看到它闪烁。

确切的行为取决于浏览器;特别是，Chrome只会重新计算鼠标事件的悬停状态。

Answer 2

这对你更有意义。

HTML：

<div class="cont"><p>foo</p></div>

的CSS：

.cont{width:100%;height:30px;}
.cont p{}
.cont:hover p{display:none}

希望有所帮助。

Answer 3

使用display: none，您可以从可见性中完全删除元素，包括高度和宽度。因此，当您将其悬停时，您将其完全移除，从而导致不会悬停，然后再次出现。这是一个非常有趣的周期。

您可能希望查看visbility或尝试将其设置在一个不会被隐藏的容器中，这样您就可以随时拥有某种可挖掘的对象。

Answer 4

一个简单的替代方案是做这样的事情：

p:hover {
    opacity: 0;
}

然而，这只会在徘徊发生时起作用。一旦悬停停止，它就不会隐藏元素。

Answer 5

它会起作用，但请注意，一旦元素变为display: none，您就不能再将其悬停，因为没有任何东西可以显示。所以它没有被发现，然后允许规则再次应用，所以基本上你在非常快速地徘徊和非徘徊之间闪烁，基本上使它看起来像什么都没发生。

Answer 6

display:none

将元素隐藏在悬停状态，因此元素不再悬停，因此会重新出现。

visibility:hidden;

将元素设置为不可见，但在可见性状态下，元素不再监听hover事件，因此将重新出现，类似于display:none

从技术上讲，您可以在悬停时执行此操作以获得所需效果

opacity:0;

当你将鼠标悬停在它上面时，该元素将保持隐藏状态。这是因为元素仍在侦听事件，因为不透明度不会影响这一点。

这是比较3

的小提琴

Answer 7

您可以使用javascript来完成这项工作

$('p').hover(function(){
 $(this).hide();
});

请参阅此fiddle了解详情。