图像翻转效果和图像下方的文字

Question

I'm trying to make an image rollover effect with text below the image that only appears when you hover over the image. When I hover over the image the text appears, but if I hover over the text the image doesn't stay active.

How do I keep the image activated even when I hover over the text?

 #wrapper .text { position: relative; left: 0px; visibility: hidden; } #wrapper:hover .text { visibility: visible; } 

 <div id="wrapper"> <img src="http://pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg" onmouseover="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'" onmouseout="this.src='http://pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg'"> <p class="text" style="text-align: left;">TEXT TEXT TEXT TEXT</p> </div> 

Answer 1

Simply add a rule so the hover of the text triggers its own visibility as well. (note that I changed the src and onmouseout values as the link seems to be dead, adjust this back for your final use)

 #wrapper .text { position: relative; left: 0px; visibility: hidden; } #wrapper:hover .text, #wrapper .text:hover { visibility: visible; } 

 <div id="wrapper"> <img src="http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg" onmouseover="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'" onmouseout="this.src='http://www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg'"> <p class="text" style="text-align: left;">TEXT TEXT TEXT TEXT</p> </div> 

Answer 2

#wrapper:hover .text, .text:hover {
visibility:visible;
}

Answer 3

I suggest binding the event listeners to the #wrapper element rather than the image itself. That way, both :hover and onmouse events are bound to the same element. For example:

 var wrapper = document.getElementById('wrapper'); var image = document.getElementById('theimage'); wrapper.addEventListener('mouseover', function() { image.src = '//www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg' }) wrapper.addEventListener('mouseout', function() { image.src = '//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg'; }); 

 img { max-width: 80px; } #wrapper { display: inline-block; padding: 1em; background-color: rgba(0, 0, 255, .2); } #wrapper .text { visibility: hidden; } #wrapper:hover .text { visibility: visible; } 

 <div id="wrapper"> <img id="theimage" src="//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg"> <p class="text">TEXT TEXT TEXT TEXT</p> </div> 

---

Edit

Here's another method using only CSS. Both images are included in the HTML and their display modes are toggled upon #wrapper hover.

 img { max-width: 80px; } #wrapper { display: inline-block; padding: 1em; background-color: rgba(0, 0, 255, .2); } .image_off { display: block; } .image_on { display: none; } #wrapper:hover .image_off { display: none; } #wrapper:hover .image_on { display: block; } #wrapper .text { visibility: hidden; } #wrapper:hover .text { visibility: visible; } 

 <div id="wrapper"> <img class="image_off" src="//pbs.twimg.com/profile_images/723561620761391104/BQmg7aTz_400x400.jpg"> <img class="image_on" src="//www.clickborde.com.br/image/data/produtos/prod_2109_815807521.jpg"> <p class="text">TEXT TEXT TEXT TEXT</p> </div>