我知道可以在JavaScript中完成，但我正在寻找CSS中的解决方案。
我有三个div。
div＃show工作正常但#hide在#main悬停时并不隐藏。我们怎么能在css中做到这一点？
#show {
display: none
}
#main:hover + #show {
display: block
}
#main:hover + #hide {
display: none
}<div id="main">
Hover me
</div>
<div id="show">
Show me on hover
</div>
<div id="hide">
Hide me on hover
</div>
答案 0 :(得分：4)
而不是csvProject
| pom.xml
|
+---src
| +---main
| | +---java
| | | \---de
| | | \---so
| | | CsvExample.java
| | |
| | \---resources
| | | \---images
| | | | logo.png
| | | | some.properties
| | | \---de
| | \---so
| | more.properties
| \---test
| \---java
您希望将+组合用于~元素，因为hide仅选择下一个兄弟
+#show {
display: none
}
#main:hover + #show {
display: block
}
#main:hover ~ #hide {
display: none
}
答案 1 :(得分：1)
您只需将+选择器替换为~，因为#hide之后#main未放置#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }
所以你的代码是：
<img src="http://www.domain.com/mypic.jpg?width=400&watermark=mywatermark" />
答案 2 :(得分：0)
您使用tilda＆＃39;〜＆＃39;对于这种情况。
+和〜之间的区别在于〜匹配所有后续兄弟，无论它们与第一个元素的接近程度，只要它们共享同一个父元素。
#show {display:none}
#main:hover + #show { display:block }
#main:hover ~ #hide { display:none }
答案 3 :(得分：0)
尝试这样的事情：＆＃34; #main：hover + #show +＃hide＆＃34;
div#show {
display:none;
}
#main:hover + #show {
display:block
}
#main:hover + #show + #hide {
display:none
}
它为我工作。