我可以在我的过度选择的两边都有onmouseover标题吗？

Question

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

Bellow是我一直致力于的代码：

Here is the code on : 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

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

但我让你做了另一种选择：

＆＃13;

＆＃13;

* {
  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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

您可能需要调整div的宽度。 ＆＃34;工具提示＆＃34;会自动随身携带。

Answer 2

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

.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>

{{1}}