bilz636
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by bilz636
-
-
Hi Guys. This is my first post here so apology in advance (if forum rules being ignore or posted into wrong category).
I am trying to display elements on div hover. I had watched a lot of tutorials and practice a lot but still i am struggling with my problem that's why i come here so maybe someone (a Hero) help me. Even sort of direction mean a lot for me
Explanation:
Actually i am trying to create a something like Character Selector UI in case if you're looking some reference.
I want to display hidden content at class="outputr1".
If i hover img 1 then it show only hover content 1. And if i hover img 3 then it show hover content 3 and so on. I also want when i hover any div then it should stay active as difficult unless i hover other div like img 1, 2 or 3.it took a month but still i haven't figure it out howto achieve this. what i am missing?
<!DOCTYPE html> <html> <head> <title>Display Hidden Content OnhoverEvent</title> <style> body { padding: 50px 10px; margin: 0 auto; max-width: 900px; } .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } </style> </head> <body> <div class"outputr1"> I want to display Hidden/hover content here </div> <br><br> <div class="myDIV"><img src="1.png" width="100px" height="100"> <div class="hide"> Hover content 1 </div> </div> <div class="myDIV"><img src="2.png" width="100px" height="100"> <div class="hide"> Hover content 2 </div> </div> <div class="myDIV"><img src="3.png" width="100px" height="100"> <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> </div> </body> </html>
Sorry about my good English. I am really new to this stuff so i am spending most of my quarantine time in web development skills
Display Hidden element when hovering
in HTML/XHTML
Posted
HI thanks for replying me back.
Actually its more like "tabs"
i found similar solution from somewhere.