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

Question

我正在为我的网站创建一个“团队”页面，它在底部包含 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';">

这应该取决于您是想在鼠标悬停在元素上还是鼠标离开元素时显示还是隐藏元素。如果您想采用这条路线，则必须使用不同的图像设置元素。