CSS：懸停時顯示div

考慮以下HTML，我在main裏面有div類magic。默認情況下隱藏magic類（使用CSS display:none）。如果鼠標移動到main div的任何位置，我想要顯示div類magic。這可以用CSS來完成嗎？或者它必須使用jQuery？CSS：懸停時顯示div

<div class="main">  
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
     <div class="magic"> 
      Hello, world 
     </div> 
</div>

CSS：

.main{ 
    width: 400px; 
    border:1px solid red; 
} 

.magic{ 
    display:none; 
    margin-top:10px; 
    background:yellow; 
    padding:5px; 
}

的jsfiddle： http://jsfiddle.net/uRrn8/1/

感謝您的幫助。

來源

2011-10-13 user966585

.main:hover .magic{ 
    display:block; 
}

這應該爲你做它在大多數瀏覽器。但IE6可以非常嚴格地不支持鏈接以外的其他任何類型的懸停僞造類。如果你想支持IE6，你將不得不使用一個javascript helper函數來觸發鼠標輸入事件和一個你可以附加到項目的CSS類。這種技術的例子有here。

來源

2011-10-13 12:20:29 PCasagrande

一方面請注意，這不會在IE6中工作，除非您使用修補程序，如http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6 – rtpHarry

這是真的。 IE6對於像懸停這樣的虛擬類的支持很不明顯。我正在更新它以包含您的鏈接。謝謝你提醒我。 – PCasagrande

是這樣寫：

.main:hover .magic{ 
    display:block 
}

檢查這個http://jsfiddle.net/sandeep/uRrn8/2/

來源

2011-10-13 12:19:43 sandeep

一邊注意的是，這不會工作在IE6除非您使用http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6 – rtpHarry

@rtpharry;每個夥伴都知道＆whooooooooo關心IE6 – sandeep

可能是您的客戶或您的客戶客戶，當他們問他們使用什麼網絡瀏覽器時，會說「是google」。 – rtpHarry

使用jQuery你可以這樣做：

$('.main').hover(function() { 
    $('.magic').css('display', 'block'); 
}, 

function() { 
    $('.magic').css('display', 'none'); 
});

來源

2011-10-13 12:21:55

更新你的小提琴，http://jsfiddle.net/uRrn8/4/

.main{width: 400px; border:1px solid red;} 
.main:hover .magic{display:block;} 
.magic{margin-top:10px; display:none; background:yellow; padding:5px;}

上面的代碼應該工作。當你將鼠標懸停在主類（.main：hover）上時，你可以通過class magic來告訴div。

來源

2011-10-13 12:21:58 Rob

這可以用CSS來實現僅看到http://www.clinic.ps 我做了對我的項目看到菜單懸停如果你想要的代碼，我可以在這裏發佈

來源

2011-10-13 12:40:54 Sedz

CSS：懸停時顯示div

回答

相關問題