0
尋找HTML代碼來保持懸停在圖像地圖上的彈出框，直到圖像地圖的另一部分具有已經被覆蓋了HTML/CSS：保持懸停彈出框到位，直到其他東西被覆蓋
按照下面的例子查看我的代碼 - 你可以看到，當你在一個國家上滾動時，會彈出一個包含該國家音樂家信息的框;而我正在尋找的東西是保持這個盒子到位，直到另一個國家被徘徊，只使用html。
感謝
HTML
<body>
<div class="wrapper" id="wrapper">
<div class="americassoundmap" id="americassoundmap">
<div class="americassoundmap_image" id="americassoundmap_image">
<img src="http://41.media.tumblr.com/d8e8b561f67d2a68c2675b6e1baadb5f/tumblr_no76qlm55E1tyc2lxo1_1280.png" alt="americassoundmap_map" usemap="#americassoundmap_map">
<!--start map-->
<map name="americassoundmap_map">
<!--start america-->
<span class="drop_america">
<span><!-- unnested unnamed span -->
<div class="america_drop" id="america_drop">
<area shape="rect" coords="251,195,526,320" alt="america">
<!--begin john williams-->
<a href="./williams.php">
<img src="http://www.jw-collection.de/images/jw9.jpg" width="100" height="100"/>
</a>
<iframe width="145" height="100" src="https://www.youtube.com/embed/gT_DXHYPy4I" frameborder="0" allowfullscreen></iframe>
<!-- begin biotext john_williams -->
<div class="biotext_john_williams" id="biotext_john_williams">
<br/><h4><center>John Williams: Overture to <i>The Cowboys</i></center></h4>
</div>
<!-- end .biotext-john_williams -->
<!--end john williams-->
<!--begin leonard bernstein-->
<a href="./bernstein.php">
<img src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/mte4mdazndewndu0mdg3mtgy.jpg"
width="100" height="100"/>
</a>
<iframe width="145" height="100" src="https://www.youtube.com/embed/9tjsKzhpSwE" frameborder="0" allowfullscreen></iframe>
<!--begin biotext leonard_bernstein-->
<div class="biotext_leonard_bernstein" id="biotext_leonard_bernstein">
<br/><h4><center>Bernstein: Three Meditations from <i>Mass</i></center></h4>
</div>
<!--end buotext leonard_bernstein>
<!--end leonard bernstein-->
</div><!-- end .america_drop -->
</span><!-- end unnested unnamed span -->
</span><!-- end .drop_america -->
<!-- end america -->
<!--start mexico-->
<span class="drop_mexico" title="mexico_drop">
<span><!--unnested unnamed span-->
<div class="mexico_drop" id="mexico_drop">
<area shape="rect" coords="296,300,530,435" alt="mexico">
<!--begin jose pablo moncayo-->
<a href="./moncayo.php">
<img src="http://noticias.starmedia.com/imagenes/2013/06/moncayo-300x300.jpg" width="100" height="100"/>
</a>
<iframe width="145" height="100" src="https://www.youtube.com/embed/5HAmrz3-ehI" frameborder="0" allowfullscreen></iframe>
<!--begin biotext jose_pablo_moncayo-->
<div class="biotext_jose_pablo_moncayo" id="biotext_jose_pablo_moncayo">
<br/><h4><center>Moncayo: <i>Huapango</i></center></h4>
</div>
<!--end biotext jose_pablo_moncayo-->
<!--end jose pablo moncayo-->
</div>
</span>
</span>
<!--end mexico-->
<!--start canada-->
<span class="drop_canada" title="canada_drop">
<span><!-- unnested unnamed span -->
<div class="canada_drop" id="canada_drop">
<area shape="rect" coords="165,75,620,205" alt="canada">
<a href="./kulesha.php">
<img src="http://www.kulesha.com/DSC_0139a.jpg" width="100" height="100"/>
<iframe width="145" height="100" src="https://www.youtube.com/embed/3cBgQsvPSnk" frameborder="0" allowfullscreen></iframe>
</a>
<!-- begin biotext gary_kulesha -->
<div class="biotext_gary_kulesha" id="biotext_gary_kulesha">
<br/><h4><center>Gary Kulesha: <i>Torque</i></center></h4>
</div>
<!-- end biotext gary_kulesha -->
</div><!-- end .canada_drop -->
</span><!-- end unnested unnamed span -->
</span><!-- end .drop_canada -->
<!--end canada-->
<!--start argentina-->
<span class="drop_argentina" title="argentina_drop">
<span><!-- unnested unnamed span -->
<div class="argentina_drop" id="argentina_drop">
<area shape="rect" coords="555,640,625,835" alt="argentina">
<a href="./piazzola.php">
<img src="http://www.longbeachopera.org/uploads/images/2012/astor-piazzolla-400-400.jpg" width="100" height="100"/>
<iframe width="145" height="100" src="https://www.youtube.com/embed/H_-cfWEMDrU" frameborder="0" allowfullscreen></iframe>
</a>
<!-- begin biotext astor piazzola -->
<div class="biotext_astor_piazzola" id="biotext_astor_piazzola">
<br/><h4><center>Piazzola: <i>Libertango</i></center></h4>
</div>
<!-- end .biotext-aastor_piazzola -->
</div><!-- end .argentina_drop -->
</span><!-- end unnested unnamed span -->
</span><!-- end .drop_argentina -->
<!-- end argentina -->
</map>
<!-- end map -->
</div>
<!-- end .americassoundmap_image -->
</div>
<!-- end .americassoundmap -->
</div>
<!-- end .wrapper -->
</body>
CSS
/*/CSS TEXT FILE FOR MAP/*/
body {
line-height: .15em;
}
h1{
font-size: 2em;
}
h2{
font-size: 1em;
}
h3{
font-size: .9em;
}
h4{
font-size: .7em;
}
h5{
font-size: .5em;
}
h6{
font-size: .45em;
}
/*BEGIN AMERICA*/
span.drop_america {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_america:hover {
text-decoration: none;
background: #ffffff;
z-index: 1;
}
span.drop_america 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: 1;
}
span.drop_america:hover span {
left: 2%;
background: #ffffff;
}
span.drop_america 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_america:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 1;
}
/*END AMERICA*/
/*BEGIN MEXICO*/
span.drop_mexico {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_mexico:hover {
text-decoration: none;
background: #ffffff;
z-index: 2;
}
span.drop_mexico 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: 2;
}
span.drop_mexico:hover span {
left: 2%;
background: #ffffff;
}
span.drop_mexico 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_mexico:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 2;
}
/*END MEXICO*/
/*BEGIN CANADA*/
span.drop_canada {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_canada:hover {
text-decoration: none;
background: #ffffff;
z-index: 3;
}
span.drop_canada 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: 3;
}
span.drop_canada:hover span {
left: 2%;
background: #ffffff;
}
span.drop_canada 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_canada:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 3;
}
/*END CANADA*/
/*BEGIN ARGENTINA*/
span.drop_argentina {
border-bottom: thin-solid;
background: #ffeedd;
}
span.drop_argentina:hover {
text-decoration: none;
background: #ffffff;
z-index: 4;
}
span.drop_argentina 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: 4;
}
span.drop_argentina:hover span {
left: 2%;
background: #ffffff;
}
span.drop_argentina 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_argentina:hover span {
margin: .2em 0 0 .5em;
background: #ffffff;
z-index: 4;
}
/*END ARGENTINA*/
CSS不知道像Javascript這樣的單獨的mouseenter/mouseout方法。所以，懸停時，懸停屬性也將被刪除。你想用純CSS來做什麼是不可能的。你肯定需要Javascript（或jQuery）。 – LinkinTED