问题
How do I make a text disappear and make different text appear by hovering over another text.
#a:hover + #b {
display: none;
}
#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>回答1:
So I guess this is what you are looking for:
#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>Explanation:
As you are already using the adjacent sibling selector (+) that selects the sibling element that immediately follows.
Using the general sibling selector (~) you can select from all the succeeding sibling elements.
Let me know your feedback on this. Thanks!
回答2:
var a = document.getElementById('a'),
b = document.getElementById('b'),
c = document.getElementById('c');
a.onmouseenter = function(){
b.style.display = 'none';
c.style.display = 'inherit';
}
a.onmouseleave = function(){
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>This is how you do it using javascript. Hope it helps you.
来源：https://stackoverflow.com/questions/39674424/how-do-i-make-a-text-disappear-and-make-different-text-appear-by-hovering-over-a