與CSS

懸停隱藏一段內容我有這樣的代碼：與CSS

HTML

<div class="image1"> 
     <p class="aaa"> 
      <h3>asdas</h3>asdsadas 
     </p> 
    </div>

CSS

.image1{ 
    display: inline-block; 
    height: 300px; 
    width: 300px; 
    background: url("http://www.avocat.dac-proiect.ro/wp/wp-content/themes/twentyfourteen/images/images1440/b1.jpg"); 
    margin-left:auto; 
    vertical-align:top; 

} 

.image1 p{ visibility: hidden;} 
.image1 p:hover{ visibility: visible;}

鏈接fiddle

我怎麼能躲e部分"aaa"並僅在懸停時纔可見？這段代碼有什麼問題？

來源

2015-03-18 Diaconescu

您不能在段落中放置標題。它是無效的HTML。 – 2015-03-18 22:30:28

問題是，如果你做了隱藏的東西 - 它不是在那裏懸停。你必須將鼠標懸停在可見的東西上才能發生。 – 2015-03-18 22:32:11

正如paulie所說，這是你的問題，段落中的標題在如此多的層次上如此錯誤。 – 2015-03-18 22:39:00

您的代碼不起作用，因爲您的p標記中有一個h3標記，這不是有效的標記。您始終可以使用Markup Validation Service來檢查您的代碼。

您可以刪除h3標籤，它將起作用。

也更改CSS：

.image1 p {visibility: hidden;} 
.image1:hover p {visibility: visible;}

見Example。

來源

2015-03-18 22:38:58 cch

回答

相關問題