Changing text inside div tag when hover over an image?

Question

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.

 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';">

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.

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

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

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