将鼠标悬停在图像上时更改 div 标签内的文本？

Question

我正在为我的网站创建一个 "Team" 页面，它在底部包含 3 张图片。当鼠标悬停在他们的图像上时，我希望页面标题更改为相应人员的姓名。到目前为止，我已经尝试了许多不同的技术，但我使用的是我将在下面复制的内联 span 方法。当我将鼠标悬停在页面其他位置的图像上时，我正在寻找最简单的方法来更改 div/span 标记内的内容。图像上的悬停 CSS 效果有效，我只是无法让顶部的文本相应地发生变化。我愿意使用 JS，只是觉得我可以只使用 CSS.

来让它工作

span#b{
  display: none;
}
span#c{
  display: none;
}
span#d{
  display: none;
}
div#image1:hover span#a {
display: none;
}
div#image1:hover span#b {
display: inline;
}
div#image1:hover span#c {
display: none;
}
div#image1:hover span#d {
display: none;
}
div#image2:hover span#a {
display: none;
}
div#image2:hover span#b {
display: none;
}
div#image2:hover span#c {
display: inline;
}
div#image2:hover span#d {
display: none;
}
div#image3:hover span#a {
display: none;
}
div#image3:hover span#b {
display: none;
}
div#image3:hover span#c {
display: none;
}
div#image3:hover span#d {
display: inline;
}

 <div id="title">
 <div class="title" id="titleAnimation">
  <span id="a">MEET THE TEAM!</span>
  <span id="b">Person #1</span>
  <span id="c">Person #2</span>
  <span id="d">Person #3</span>
 </div>
 </div>
 <div class="content" id="contentAnimation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor imperdiet, tincidunt arcu et, porta arcu. Aliquam consectetur ex quam, in venenatis velit vehicula non. Cras id dui sed dui semper gravida. Nunc vulputate lobortis massa et mattis. Integer imperdiet, purus sit amet bibendum convallis, nunc massa tincidunt risus, et convallis enim sapien et neque. Proin eleifend cursus nulla quis laoreet. Suspendisse et feugiat nisl, in mattis metus. Aliquam faucibus pharetra massa id tempor. Sed porttitor magna eu lectus aliquam lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
  <div id="image1"><div class="image1" id="image1border"></div></div>
  <div id="image2"><div class="image2" id="image2border"></div></div>
  <div id="image3"><div class="image3" id="image3border"></div></div>

 <div class="banner"></div>

Answer 1

<div onmouseover="document.getElementById('div1').style.display = 'block';"
onmouseout="document.getElementById('div1').style.display = 'none';">

这应该取决于您是想在鼠标悬停在元素上还是鼠标离开元素时显示还是隐藏元素。如果你想走这条路，你将不得不用不同的方式设置元素。

Answer 2

如果您正在寻找一种纯粹的 css 方法，这是一个选择。否则你可以像其他人建议的那样使用 JavaScript ！

#team{
    position: relative;
  
    padding-top: 35px;
}
.image{
    width: 250px;
    height: 175px;
    display: block;
    position: relative;
}
.title{
    display: block;
    position: absolute;
  
    top: 0;
    left: 0;
  
    font-size: 1.5em;
    
    -webkit-transition: opacity 0.5s ease-in;
       -moz-transition: opacity 0.5s ease-in;
            transition: opacity 0.5s ease-in;
  
    visibility: hidden;
    opacity: 0;
}
#windows-img:hover ~ #windows-title,
#linux-img:hover ~ #linux-title,
#ios-img:hover ~ #ios-title{
    visibility: visible;
    opacity: 1;
}

<div id="team">
    <img class="image" id="linux-img" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSkugnJgWthlzm9MABRLY5Bgb45UaGrTRkax_TJa5fGgR-vCu8o"/>
    <img class="image" id="windows-img" src="http://cdn.wccftech.com/wp-content/uploads/2016/05/4195797-windows-7-alternate-blue-635x397.jpg"/>
    <img class="image" id="ios-img" src="http://www.i-verve.com/wp-content/themes/i-verve/images/technology/iOS.svg"/>
  
    <label class="title" id="linux-title">Linux</label>
    <label class="title" id="windows-title">Windows</label>
    <label class="title" id="ios-title">iOS</label>
</div>

Answer 3

$(document).ready(function(){
  
  $("#person1").mouseover(function(){
     $("#title").text("Babe Ruth");
   });
  
   $("#person2").mouseover(function(){
     $("#title").text("Joe Smith");
   });
  
   $("#person3").mouseover(function(){
     $("#title").text("Bo Jackson");
   });
  
});

/*css added for image classes for display purposes*/
.imgs {
  margin-top: 25px;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  float: left;
  display: inline;
  margin-right: 20px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="title">MEET THE TEAM!</div>
 
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac tortor imperdiet, tincidunt arcu   et, porta arcu. Aliquam consectetur ex quam, in venenatis velit vehicula non. Cras id dui sed dui semper gravida. Nunc vulputate lobortis massa et mattis. Integer imperdiet, purus sit amet bibendum convallis, nunc massa tincidunt risus, et convallis enim sapien et neque. Proin eleifend cursus nulla quis laoreet. Suspendisse et feugiat nisl, in mattis metus. Aliquam faucibus pharetra massa id tempor. Sed porttitor magna eu lectus aliquam lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
        <!-- you could also move the id's to the img element-->
  <div  id="person1" class="imgs"><img src="#" alt="" /></div>
  <div  id="person2"class="imgs"><img  src="#" alt="" /></div>
  <div  id="person3"class="imgs"><img  src="#" alt="" /></div>

 <div class="banner"></div>

希望对您有所帮助！

将鼠标悬停在图像上时更改 div 标签内的文本？

Changing text inside div tag when hover over an image?

html

css

jquery

mouseover

hover