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

I am creating a "Team" page for my website and it contains 3 images at the bottom. I want the title of the page to change to the name of the corresponding person when the mouse is hovering over their image. So far I have tried many different techniques, but am using an inline span method that I will copy below. I am looking for the easiest way to change the content inside of a div/span tag when I hover over an image elsewhere on the page. The hover CSS effects on the image are working, I just can't get the text at the top to change correspondingly. I'm open to using JS, just feel like I could get it to work using just CSS.

我正在为我的网站创建一个“团队”页面，它底部包含3个图像。当鼠标悬停在图像上时，我希望页面标题更改为相应人物的名称。到目前为止，我已经尝试了许多不同的技术，但我使用的是内联跨度方法，我将在下面复制。当我将鼠标悬停在页面上其他位置的图像上时，我正在寻找更改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>

3 个解决方案

#1

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

this should work depending on if you want to show vs hide element when mousing over or when mouse leaves the element. You will have to setup elements a differently with images if you want to go with this route.

这应该工作取决于你是否想要鼠标悬停或鼠标离开元素时显示vs隐藏元素。如果您想使用此路线，则必须以不同的方式设置元素。

#2

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

Hope that helps!

希望有所帮助！

#3

If you are looking for a pure css way of doing it, this is an option. Else you could use JavaScript as somebody else suggested!

如果您正在寻找一种纯粹的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>

#1

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