2016-09-24 3 views

答えて

0

var a = document.getElementById('a'), 
 
\t b = document.getElementById('b'), 
 
\t c = document.getElementById('c'); 
 
    
 
    
 
a.onmouseenter = function(){ 
 
\t b.style.display = 'none'; 
 
    c.style.display = 'inherit'; 
 
} 
 

 
a.onmouseleave = function(){ 
 
\t b.style.display = 'inherit'; 
 
    c.style.display = 'none'; 
 
}
#c { 
 
    display: none; 
 
}
<div id="a">Hover here</div> 
 
<div id="b">This will disappear</div> 
 
<div id="c">This will appear</div>

これはJavaScriptを使用してそれを行う方法です。それがあなたを助けることを願ってください。

2

だから私は、これはあなたが探しているものだと思い:

#a:hover + #b { 
 
    display: none; 
 
} 
 
#a:hover ~ #c { 
 
    display: block; 
 
} 
 
#c { 
 
    display: none; 
 
}
<body> 
 
    <div id="a">Hover here</div> 
 
    <div id="b">This will disappear</div> 
 
    <div id="c">This will appear</div> 
 
</body>

説明: すでに兄弟要素を選択し、隣接兄弟セレクタ(+)を使用しているとそれはすぐ後に続く。

一般的な兄弟セレクタ(~)を使用すると、後続するすべての兄弟要素から選択できます。

ご意見をお寄せください。ありがとう!

+0

別の「ホバーここ」のテキスト(同じ機能)ではなく、「ホバー2」のような別のテキストがある場合。 「ここでホバー2」を作って、「これは消えます」と同じテキストを消して、別のテキストを再び表示させたいと思いました。 申し訳ありませんが、私は説明がうまくいかないです。 – Altria

+0

申し訳ありませんが、私は従っていません...多分私にいくつかのコードを表示することができますか? – kukkuz

+0