は1つの要素にマウスを置いて、別の要素を移す

Question

私は2つのdivs AとBを持っています。div Aは画像です。 Div Bはdiv Aの下にある段落です。

div Aの上にマウスを置くとdiv Bの背景とフォントの色がdiv Aに影響せずに異なる色に変わるようにしようとしています。 私は現在：ホバーセレクタを持っているので、誰かがそれを乗り越えるとdiv Bが変わります。しかし、私はDiv Aに乗っている間にdiv Bにどのように影響を与えるのか分かりません。

これを達成するための手掛かりはありますか？

編集： 私のコードの構造については下記をご覧ください。 ＃image1の上にマウスを置くと、＃info1の背景とその段落のフォント色が変わり、他の2つの画像も同様に変化するようにしようとしています。

<div class="row"> 
    <div class="col-md-4 col-sm-12"> 
     <div class="row"> 
     <div class="col-md-12 col-sm-6"> 
      <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block"> 
     </div> 
     <div id="info1" class="col-md-12 col-sm-6"> 
      <p class="washed-out"> 1 </p> 
     </div> 
     </div> 
    </div> 

    <div class="col-md-4 col-sm-12"> 
     <div class="row"> 
     <div class="col-md-12 col-sm-6"> 
      <img id="image2" src="res/images/aimage2.png" class="img-responsive center-block"> 
     </div> 
     <div id="info2" class="col-md-12 col-sm-6"> 
      <p class="washed-out"> 2 </p> 
     </div> 
     </div> 
    </div> 

    <div class="col-md-4 col-sm-12"> 
     <div class="row"> 
     <div class="col-md-12 col-sm-6"> 
      <img id="image3" src="res/images/animage3.png" class="img-responsive center-block"> 
     </div> 
     <div id="info3" class="col-md-12 col-sm-6"> 
      <p class="washed-out"> 3 </p> 
     </div> 
     </div> 
    </div> 
</div> 

CSS：

.washed-out{ 
    background: white; 
    color: black; 
    transition: background-color 300ms linear, color 1s linear; 
} 

.washed-out:hover{ 
    background: black; 
    color: white; 
} 

Answer 1

コメント、可能なCSSのバージョン

.hoverme:hover + div .washed-out { 
 
    color: red; 
 
    background: black; 
 
}

<div class="col-md-12 col-sm-6 hoverme"> 
 
    <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block"> 
 
</div> 
 
<div id="info1" class="col-md-12 col-sm-6"> 
 
    <p class="washed-out">1</p> 
 
</div>

更新のコメントに基づいて、可能JSバージョン

に基づいて +

img:hover + div { 
 
    color: red; 
 
}

<img src="http://placehold.it/100"> 
 
<div>Hey there...I get red when you hover the image</div>

更新レクター

window.addEventListener('load', function() { 
 
    var imglist = document.querySelectorAll('img.img-responsive'); 
 
    for (var i = 0; i < imglist.length; i++) { 
 
    imglist[i].addEventListener('mouseover', function(e) { e.target.parentElement.nextElementSibling.classList.add('infos'); 
 
    }) 
 
    imglist[i].addEventListener('mouseout', function(e) { e.target.parentElement.nextElementSibling.classList.remove('infos'); 
 
    }) 
 
    } 
 
})

div.infos .washed-out { 
 
    color: red; 
 
    background: black; 
 
}

<div class="col-md-12 col-sm-6"> 
 
    <img id="image1" src="res/images/aimage1.png" class="img-responsive center-block"> 
 
</div> 
 
<div id="info1" class="col-md-12 col-sm-6"> 
 
    <p class="washed-out">1</p> 
 
</div>

Answer 2

あなたはadjacent sibling selectorを探している - element:hover + element：

あなたは兄弟セレクタ ~または即時兄弟SEを使用

.container { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    transition: all 0.5s; 
 
} 
 

 
.container:first-child { 
 
    margin-bottom: 10px; 
 
} 
 

 
/** if the 1st element is hovered, changed the 2nd **/ 
 
.container:hover + .container { 
 
    background: blue; 
 
    color: white; 
 
}

<div class="container">Div 1</div> 
 

 
<div class="container">Div 2</div>

Answer 3

使用後継兄弟~または直後の後続兄弟+は、JavaScriptのイベントハンドラによって行うことができる何がしたいhover

img:hover ~ div { 
 
    color: red; 
 
}

<img src="http://placehold.it/100"> 
 
<div>Hey there...I get red when you hover the image</div> 
 
<div>Hey there...I also get red when you hover the image</div>

Answer 4

上の任意の変更を行います。

このような何か：

var d1 = document.getElementById("div1"); // on hover on this div 
var d2 = document.getElementById("div2"); // bring changes to this 

d1.addEventListener("hover", callfun, false); 

function callfun(){ 
    d2.style.backgroundColor = 'blue'; 
} 

幸運

Answer 5

基本的に次の答えに示すように、ハンドラ内外にホバリングを登録する必要があります。 Event listener hover changing other element ここではそれを少し変更したバージョンですあなたのニーズにさらに近づけることができます。

document.getElementById("Div-A").addEventListener("mouseenter",function(){ 
    document.getElementById("Div-B").style.backgroundColor = "red"; 
    document.getElementById("Div-B").style.backgroundColor = "Yellow"; 
}); 

document.getElementById("Div-A").addEventListener("mouseout",function(){ 
    document.getElementById("Div-B").style.backgroundColor = ""; 
    document.getElementById("Div-B").style.text = ""; 
}); 

Answer 6

<script> 
    function Myfunc1(){ 
    document.getElementById("div1").style.backgroundColor = "green" 
    document.getElementById("div2").style.backgroundColor = "white"} 
    function Myfunc2(){ 
    document.getElementById("div2").style.backgroundColor = "red" 
    document.getElementById("div1").style.backgroundColor = "white"} 
</script> 
    <pre><div id="div1" onmouseover="Myfunc1()"><img src=""><p> look</p></div> 
    <div id="div2" onmouseover="Myfunc2()"><p>here</p></div></pre>