html - All Images & Extra Block Pop Up While Using Mouse Over in CSS3, When Only 1 Should -
i trying image map working. can't seem going properly. need know went wrong here, , can fix it.
there empty box popping , of mouse-over boxes pop up. 1 hovering on @ time should pop up.
i appreciate help
span.drop_alaska { border-bottom: thin dotted; background: #ffeedd; } span.drop_alaska:hover { text-decoration: none; background: #ffffff; z-index: 6; } span.drop_alaska span { position: absolute; left: -9999em; margin: 2em 0 0 0em; padding: 1em 1em 1em 1em; border-style: solid; border-color: black; border-width: 1em; z-index: 6; } span.drop_alaska:hover span { left: 2%; background: #ffffff; } span.drop_alaska span { position: absolute; left: -9999px; margin: 1em 0em 0em 0em; padding: 1em 1em 1em 1em; border-style: solid; border-color: black; border-width: 1em; } span.drop_alaska:hover span { margin: 2em 0 0 5em; background: #ffffff; z-index: 6; } span.drop_brazil { border-bottom: thin dotted; background: #ffeedd; } span.drop_brazil:hover { text-decoration: none; background: #ffffff; z-index: 7; } span.drop_brazil span { position: absolute; left: -9999em; margin: 2em 0 0 0em; padding: 1em 1em 1em 1em; border-style: solid; border-color: black; border-width: 1em; z-index: 7; } span.drop_brazil:hover span { left: 2%; background: #ffffff; } span.drop_brazil span { position: absolute; left: -9999em; margin: 1em 0em 0em 0em; padding: 1em 1em 1em 1em; border-style: solid; border-color: black; border-width: 1em; } span.drop_brazil:hover span { margin: 2em 0 0 5em; background: #ffffff; z-index: 7; }<!doctype html> <html> <head> <meta name="title" content="tso americas sound map" /> <meta name="author" content="tso"> <link rel="stylesheet" type="text/css" href="mapcss.css"> <meta charset="utf-8" /> </head> <body> <div class="wrapper" id="wrapper"> <div class="americassoundmap" id="americassoundmap"> <div class="americassoundmap_image" id="americassoundmap_image"> <img src="http://40.media.tumblr.com/d8e8b561f67d2a68c2675b6e1baadb5f/tumblr_no76qlm55e1tyc2lxo1_500.png" alt="americassoundmap_map" usemap="#americassoundmap_map"> <map name="americassoundmap_map"> <span class="drop_alaska" title="alaskan_musician"><span> <div class="alaskan_drop" id="alaskan_drop"> <area shape="rect" coords="12,42,85,76" alt="alaska"> <a href="alaska_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150"/> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_alaska" id="biotext_alaska"> <br/> alaskan musician's bio <br/> have alaskan musicians? <br/> might!!! </div> <div class="separator" id="separator"> <span></span> </div> <span class="drop_brazil" title="brazillian_drop"> <span> <div class="brazil_drop" id="brazil_drop"> <area shape="rect" coords="315,266,400,351" alt="brazil"> <a href="brazillian_musician_link_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150" /> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_brazil" id="biotext_brazil"> <br/> brazillian musician's bio <br/> have brazillian musicians? <br/> might!!! </div> </div> </span> </span> </span> </span> </map> </div> </div> </div> </body> </html>i it's pretty silly way have set up. need work can fill in content , find coordinates on image map. if doing wrong, know can fix myself.
i think there multiple issues @ play here.
firstly, there 1 structural error (no closing tag ".alaskan-drop" div), on top of that, brazilian section nested within alaskan one. intent?
and secondly, reason popup occurring in multiple places because css tells s under "span.drop_alaska" span appear whenever ".drop_alaska" hovered over. means any child span. directly ties structural issue in first point: because brazilian section technically child of alaskan one, subject alaskan hover rules. moving brazilian section out of alaskan 1 means can operate independently.
here's clean-up of original setup:
<map name="americassoundmap_map"> <span class="drop_alaska" title="alaskan_musician"> <span><!-- parent unnamed span --> <div class="alaskan_drop" id="alaskan_drop"> <area shape="rect" coords="12,42,85,76" alt="alaska"> <a href="alaska_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150"/> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_alaska" id="biotext_alaska"> <br/>an alaskan musician's bio<br/>does have alaskan musicians?<br/>they might!!! </div><!-- end .biotext_alaska --> <div class="separator" id="separator"> <span></span> </div><!-- end .separator --> <span class="drop_brazil" title="brazillian_drop"> <span><!-- nested unnamed span --> <div class="brazil_drop" id="brazil_drop"> <area shape="rect" coords="315,266,400,351" alt="brazil"> <a href="brazillian_musician_link_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150"/> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_brazil" id="biotext_brazil"> <br/>an brazillian musician's bio<br/>does have brazillian musicians?<br/>they might!!! </div><!-- end .biotext-brazil --> </div><!-- end .brazil_drop --> </span><!-- end nested unnamed span --> </span><!-- end .drop_brazil --> </div><!-- end .alaskan_drop --> <!-- </div> tag omitted, added in --> </span><!-- end parent unnamed span --> </span><!-- end .drop_alaska --> </map><!-- end map --> (fiddle: http://jsfiddle.net/c34h2zex/)
and here's 1 sections no longer nested:
<map name="americassoundmap_map"> <span class="drop_alaska" title="alaskan_musician"> <span><!-- parent unnamed span --> <div class="alaskan_drop" id="alaskan_drop"> <area shape="rect" coords="12,42,85,76" alt="alaska"> <a href="alaska_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150"/> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_alaska" id="biotext_alaska"> <br/>an alaskan musician's bio<br/>does have alaskan musicians?<br/>they might!!! </div><!-- end .biotext_alaska --> </div><!-- end .alaskan_drop --> <!-- </div> tag omitted, added in --> </span><!-- end parent unnamed span --> </span><!-- end .drop_alaska --> <div class="separator" id="separator"> <span></span> </div><!-- end .separator --> <span class="drop_brazil" title="brazillian_drop"> <span><!-- (formerly) nested unnamed span --> <div class="brazil_drop" id="brazil_drop"> <area shape="rect" coords="315,266,400,351" alt="brazil"> <a href="brazillian_musician_link_musician_link.php"> <img src="https://www.science.unsw.edu.au/files/news/527c868c9284958a22f9e4d448bdda12.jpg" width="200" height="150"/> <iframe width="200" height="150" src="https://www.youtube.com/embed/mlhxarmtndq" frameborder="0" allowfullscreen></iframe> </a> <div class="biotext_brazil" id="biotext_brazil"> <br/>an brazillian musician's bio<br/>does have brazillian musicians?<br/>they might!!! </div><!-- end .biotext-brazil --> </div><!-- end .brazil_drop --> </span><!-- end (formerly) nested unnamed span --> </span><!-- end .drop_brazil --> </map><!-- end map --> (fiddle: http://jsfiddle.net/mbg7sv86/)
(sorry if that's kinda wordy, couldn't post just fiddle url.) tl;dr: unless excluded, css affect child elements, original setup contained
Comments
Post a Comment