隱藏和揭示文字css

我知道這個問題已被問了上百次，而且我已經閱讀了其中的每一個。隱藏和揭示文字css

我有一個圖像，也是一個鏈接。當圖片懸停時，它會顯示一張新圖片，並且我有一個小段落描述，當鏈接懸停時，我想在圖片旁邊彈出。很簡單，對吧？

我在做什麼對我有意義，並且是對這個問題的回答。我究竟做錯了什麼？這看起來非常簡單。

How to show text on image when hovering?

我會貼上我的相關代碼。相較於發佈鏈接的答案，我有類PROJECT1代替imgWrapper和novelDescrip代替imgDescription

HTML

<div class="project1"> 
     <a href="#"><img id="novel" src="img/newnovel.png" onmouseover="this.src='img/newnovelblue.png'" onmouseout="this.src='img/newnovel.png'" /></a> 

     <p class="novelDescrip" >A website for a local musician to market, stream, and distribute music and merchandise.</p> 

</div>

CSS

.project1 p { 
    width: 25%; 
    margin: 20px 15px 0 0; 
    float: right; 
} 

.novelDescrip { 
    position: absolute; 
    top:0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    visibility: hidden; 
    opacity: 0; 

    -webkit-transition: visibility opacity 0.2s; 
} 

.project1:hover .novelDescrip { 
    visibility: visible; 
    opacity: 1; 
}

編輯

這裏是我的問題，現在，文本隱藏並顯示，但鼠標懸停在由我繪製在此圖像上的矩形所包圍的區域中時，鼠標懸停就會被激活。任何想法爲什麼發生這種情況？

enter image description here

來源

2013-10-25 zburns12

我也應該提到，它隱藏的文本，但它不使其可見 – zburns12

下一個圖像意味着什麼？恰到好處的形象？或以下？如果下面只是刪除'position：absolute;'和'float：right;' – bansi

該段落應顯示在圖像的右側 – zburns12

你並不需要的位置。 top:0;left: 0;絕對定位的div將始終顯示在瀏覽器的左上角。還爲novelDescrip添加了display:inline，讓div在圖片旁邊顯示。

.project1 p { 
    width: 25%; 
    margin: 20px 15px 0 0; 
    float: right; 
} 

.novelDescrip { 
    position: absolute; 
    visibility: hidden; 
    opacity: 0; 

    -webkit-transition: visibility opacity 0.2s; 
    display:inline; 
} 

.project1:hover .novelDescrip { 
    visibility: visible; 
    opacity: 1; 
}

希望這是你在找什麼。

來源

2013-10-25 04:01:00 bansi

這可行！它使段落隱藏並顯示。但是，激活顯示的區域遠大於圖像。任何想法爲什麼這可能是？ – zburns12

如果我將鼠標懸停在圖像上方或與其相同的級別上，則會激活段落。 – zburns12

你正在使用'width：25％;'。嘗試改變爲固定寬度：150px;如果它落在任何其他元素的後面，您也可以將'z-index'設置爲更高的值。 – bansi

我的是這將解決你的問題

img { 
    height:30%; 
    width:30%; 
} 
.project1 p 
{ 
    width: 65%; 
    float: right; 
    display:none; 
    margin-left:5px; 
} 
.project1:hover .novelDescrip 
{ 
    display:block; 
}

Live Demo

來源

2013-10-25 04:51:22 Rex

這也可以隱藏和顯示。謝謝！你知道爲什麼懸停區域比我的圖像更大嗎？我在原帖中發佈了截圖。 – zburns12

@ zburns12作爲懸停設置爲類的容器div，如果你想要它samller，改變懸停圖像只 – Rex

這是非常有道理的，但是，顯示退出工作。它總是隱藏的。我的圖片有id =「novel」，所以我不會將它改爲#novel：hover .novelDescrip {display：block; }？或者我沒有正確地做到這一點？ – zburns12

隱藏和揭示文字css

回答

相關問題