Jump to content


Popular Content

Showing content with the highest reputation on 04/10/2020 in all areas

  1. 1 point
    I am unclear of your request, so this is just an attempt toward a solution. First, move the height and width definitions in the <img> tags to the CSS section. Also, be consistent in using the 'px' notation which is not used in the tag portions. Second, change .myDIV:hover + .hide { to .myDIV:hover .hide { to get the effect I think you desire. Finally, I don't know what is to happen with the displays of the first and last <div> elements. You hide the second with the '.hide' class, but you show the first when you don't have any definition to hide it. What are you trying to do here. <!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <!-- From: http://w3schools.invisionzone.com/topic/61228-display-hidden-element-when-hovering/ --> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover .hide { display: block; color: red; } img { display: inline-block; height: 100px; width: 100px; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"> <img src="1.png" alt="1.png"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"> <img src="2.png" alt="2.png"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"> <img src="3.png" alt="3.png"> <div class="hide"> Display Hover content 3 </div> </div> <div class="hide"> I am Hover Content but i don't want this to display.</div> </body> </html> Note: I don't have a reference to your '.png' image files so I just inserted an "alt=xxx" attribute as a place holder. Always a good idea to include description of the images in case they are not show for some reason. BTW, welcome to the forums.
  • Create New...