强文本这是我的html代码
<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>
这是我的样式表
#two
{
display:none;
}
#one
{
background-color :red;
}
当我将鼠标悬停在芒果上时，我想以绿色（bg色）显示苹果，而不是红色（bg色）芒果，我尝试了以下代码，但这对我没有帮助。
#one :hover + #two
{
display:block;
}
#one :hover ~ #two
{
display: inline-block;
background-color: greenyellow;
}
最佳答案
这是仅CSS的解决方案。诀窍是将第二个元素覆盖在第一个元素之上，然后将其隐藏。悬停时，显示第二个div。
注意：我没有使用visibility，因为不能将鼠标悬停在不可见的元素上。
这是代码段：
#one {
display:block;
background-color: red;
}
#two {
opacity: 0;
background-color: green;
position: relative;
top: -34px;
}
#two:hover {
opacity: 1;
}
}<html>
<head>
<link rel="stylesheet" type="text/css" href="hov.css">
</head>
<body>
<div id="one">
<p>mango</p>
</div>
<div id="two">
<p>apple</p>
</div>
</body>
</html>关于css - 当鼠标悬停在芒果上时，我想以绿色显示苹果，而不是红色显示芒果，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38892522/