画像の上にカーソルを置いたときにdivタグ内のテキストを変更しますか？

Question

私は自分のウェブサイトの "チーム"ページを作成していますが、下部に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; 
 
}

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

これはあなたがマウスが要素から離れたときにマウスオーバー時または非表示要素対表示したい場合に応じて動作するはずです。このルートを使いたい場合は、画像と要素を別々に設定する必要があります。

Answer 2

純粋な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>

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>

役に立てば幸い！