Question

如何将文本消失并将鼠标悬停在另一个文本上以显示不同的文本。

＆＃13;

#a:hover + #b {
  display: none;
}
#c {
  display: none;
}

＆＃13;

<body>
  <div id="a">Hover here</div>
  <div id="b">This will disappear</div>
  <div id="c">This will appear</div>
</body>

＆＃13;

Answer 1

所以我想这就是你要找的东西：

＆＃13;

#a:hover + #b {
  display: none;
}
#a:hover ~ #c {
  display: block;
}
#c {
  display: none;
}

＆＃13;

<body>
  <div id="a">Hover here</div>
  <div id="b">This will disappear</div>
  <div id="c">This will appear</div>
</body>

＆＃13;

<强>解释：因为您已经在使用相邻的兄弟选择器（+）来选择紧随其后的兄弟元素。

使用通用兄弟选择器（~），您可以从所有后续兄弟元素中进行选择。

让我知道您对此的反馈。谢谢！

Answer 2

＆＃13;

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

＆＃13;

#c {
    display: none;
}

＆＃13;

<div id="a">Hover here</div>
<div id="b">This will disappear</div>
<div id="c">This will appear</div>

＆＃13;

这是你用javascript做的。希望它可以帮到你。

如何使文本消失并通过将鼠标悬停在另一个文本上来显示不同的文本

2 个答案: