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

回答

相關問題