Question

我正在创建一个＆＃34; Team＆＃34;我的网站页面，它底部包含3个图像。当鼠标悬停在图像上时，我希望页面标题更改为相应人物的名称。到目前为止，我已经尝试了许多不同的技术，但我使用的是内联跨度方法，我将在下面复制。当我将鼠标悬停在页面上其他位置的图像上时，我正在寻找更改div / span标记内容的最简单方法。悬停的CSS效果对图像起作用，我只是不能让顶部的文字相应地改变。我愿意使用JS，只是觉得我可以使用CSS来实现它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助！

Answer 3

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

＆＃13;

.xml

＆＃13;

.xhtml

＆＃13;

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

3 个答案: