Ändern von Text innerhalb des div-Tags, wenn der Mauszeiger über ein Bild bewegt wird?

Question

Ich erstelle eine "Team" -Seite für meine Website und sie enthält 3 Bilder am unteren Rand. Ich möchte, dass der Titel der Seite in den Namen der entsprechenden Person geändert wird, wenn die Maus über ihr Bild bewegt wird. Bisher habe ich viele verschiedene Techniken ausprobiert, verwende aber eine Inline-Span-Methode, die ich unten kopieren werde. Ich suche nach dem einfachsten Weg, um den Inhalt innerhalb eines div/span-Tags zu ändern, wenn ich über ein Bild an anderer Stelle auf der Seite schwebe. Die Hover-CSS-Effekte auf dem Bild funktionieren, ich kann den Text oben nicht ändern. Ich bin offen für die Verwendung von JS, habe einfach das Gefühl, ich könnte es nur mit CSS zum Laufen bringen.

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

\t <div id="title"> 
 
\t <div class="title" id="titleAnimation"> 
 
\t \t <span id="a">MEET THE TEAM!</span> 
 
\t \t <span id="b">Person #1</span> 
 
\t \t <span id="c">Person #2</span> 
 
\t \t <span id="d">Person #3</span> 
 
\t </div> 
 
\t </div> 
 
\t <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. 
 
\t \t </div> 
 
\t \t <div id="image1"><div class="image1" id="image1border"></div></div> 
 
\t \t <div id="image2"><div class="image2" id="image2border"></div></div> 
 
\t \t <div id="image3"><div class="image3" id="image3border"></div></div> 
 

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

Answer 1

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

sollte dies je nach funktionieren, wenn Sie gegen hide Element angezeigt werden sollen, wenn sie über mousing oder wenn die Maus das Element verläßt. Sie müssen Elemente mit Bildern anders einrichten, wenn Sie diese Route verwenden möchten.

Answer 2

Wenn Sie nach einer reinen CSS-Methode suchen, ist dies eine Option. Sonst könnten Sie JavaScript verwenden, wie jemand anders vorgeschlagen hat!

#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> 
 
\t 
 
<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--> 
 
\t \t <div id="person1" class="imgs"><img src="#" alt="" /></div> 
 
\t \t <div id="person2"class="imgs"><img src="#" alt="" /></div> 
 
\t \t <div id="person3"class="imgs"><img src="#" alt="" /></div> 
 

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

Hoffnung, das hilft!