过度选择的两面都可以有鼠标悬停标题吗？

Question

我正在使用onmouseover覆盖背景图片的精确部分，并且具有相应的标题。 我要实现的目标是在我的过度选择中有两个标题，一个在左侧，另一个在右侧，这可能吗？ 我尝试添加跨度和样式，但是没有成功，这是因为我的编程技能仍然很差。

贝娄是我一直在努力的代码：

这是以下代码：jsfiddle

<div style="position:relative; margin-top:25px; background-
image:url(http://nuno-sarmento.com/books.png); width:640px; height:82px;">

<a href="#" style="display:block;  position:absolute; height:70px; 
width:175px; top:0px; left:220px; overflow:hidden;" 
onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" title="1960
to 1970" 
onmouseout="this.style.backgroundColor='';"></a>  


<a href="#" style="display:block;  position:absolute; height:74px;
width:175px; top:0px; left:20px; overflow:hidden;"   
onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" title="1970 to
1980" 
onmouseout="this.style.backgroundColor='';"></a>  


<a href="#" style="display:block;  position:absolute; height:74px;
width:175px; top:0px; left:420px; overflow:hidden;" 
onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" title="1990 to 
2000" 
onmouseout="this.style.backgroundColor='';"></a>        

</div>

我要实现的图像草图

Answer 1

用您的代码很难做到这一点。 标题属性由浏览器设置样式，并且不会受到影响。

但我为您提供了这种选择：

 * { box-sizing: boder-box; margin: 0; padding: 0; } #main { width: 640px; height: 82px; background-image: url(http://nuno-sarmento.com/books.png) } #main>div { position: relative; float: left; width: 33.33%; height: 100%; } #main>div p { display: none; position: absolute; top: 100%; margin-top: 6px; padding: 5px; background: lightblue; } #main>div p:first-child { left: 0; } #main>div p:last-child { right: 0; } #main>div:hover { background: rgba(0,0,0,0.5); } #main>div:hover p { display: block; } #main>div p:after { content: ""; position: absolute; bottom: 100%; left: 0; border: 6px solid transparent; border-bottom-color: lightblue; } #main>div p:last-child:after { left: auto; right: 0; } 

 <div id="main"> <div> <p>1960</p> <p>1670</p> </div> <div> <p>1970</p> <p>1680</p> </div> <div> <p>1990</p> <p>2000</p> </div> </div> 

您可能需要调整div的宽度。 “工具提示”将自动随之移动。

Answer 2

您也可以使用一些JQuery来做到这一点：

 $(document).ready(function(){ $( 'a' ).mouseout(function(){ $('.info_span1').hide();$('.info_span2').hide(); }); $('a').mouseenter(function(){ var position = $(this).position(); $(".info_span1").show();$(".info_span2").show(); $(".info_span1").text($(this).data("title1")); $(".info_span2").text($(this).data("title2")); $(".info_span1").css({top: $(this).height()+10, left:position.left, position:'absolute'}); $(".info_span2").css({top: $(this).height()+10, left:position.left+$(this).width()-60, position:'absolute'}); }); }); 

 .info_span1 .info_span2{ display:none; text-align:center; } .info_span2{ display:none; width:50px; left: auto; right: 0; background: #ccc none repeat scroll 0 0; padding: 5px; position: absolute; border-radius: 6px; } .info_span2:after{ left: auto; right: 4px; border-color: transparent transparent #ccc; border-style: solid; border-width: 6px; bottom: 100%; content: ""; position: absolute; margin-bottom: -1px; } .info_span1{ display:none; width:50px; background:#ccc; padding: 5px; position: absolute; border-radius: 6px; } .info_span1:after{ border-color: transparent transparent #ccc; border-style: solid; border-width: 6px; bottom: 100%; content: ""; left: 4px; position: absolute; margin-bottom: -1px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div style="position:relative; margin-top:25px; background-image:url(http://nuno-sarmento.com/books.png); width:640px; height:82px;"> <span class="info_span1"></span> <span class="info_span2"></span> <a href="#" style="display:block; position:absolute; height:75px; width:175px; top:0px; left:20px; overflow:hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1960" data-title2="1970" onmouseout="this.style.backgroundColor='';"></a> <a href="#" style="display:block; position:absolute; height:75px; width:175px; top:0px; left:220px; overflow:hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1970" data-title2="1980" onmouseout="this.style.backgroundColor='';"></a> <a href="#" style="display:block; position:absolute; height:75px; width:175px; top:0px; left:420px; overflow:hidden;" onmouseover="this.style.backgroundColor=' rgba(0, 0, 0, 0.5)';" data-title1="1990" data-title2="2000" onmouseout="this.style.backgroundColor='';"></a> <p></p> </div>