所以这就是我想要做的:
我有两个并排的图标,下面有两个隐藏的 span。当我将鼠标悬停在一个图标上时,我希望显示相应的范围。
------------ HTML 部分----------------
<span class="icons"><!--ICONS-->
<li class="oneLI">one</li>
<li class="twoLI">two</li>
</span>
<span class="popups">
<span class="one"></span>
<span class="two"></span>
</span>
------------CSS部分------------
span.popups span.one,span.popups span.two{opacity:0;
span.icons:first-child:hover + span.popups span.one{opacity:1}
span.icons:last-child:hover + span.popups span.two{opacity:1}
显然这不太行得通,我将如何仅使用 CSS 来解决这个问题?
最佳答案
让我先解释一下你的选择器是
span.icons:first-child:hover + span.popups span.one{opacity:1}
好吧,您正在尝试选择嵌套在 span.icons
下的 first-child 并在悬停它时选择 span.one
它嵌套在 span.popups
中,但你在这里出错了,你选择了相邻的 span
元素,其中 .popups
不相邻span
嵌套在.icons
里面,但是一般来说,你的选择器是错误的,CSS无法选择父元素,简而言之,CSS一旦进入元素就无法返回,它无法向上移动。
所以你不能那样做,要么你需要改变你的 DOM,并将所有 span
元素放在同一级别,要么你隐藏的 span
应该在子级别。
另一种实现此目的的方法是使用 position
,我不会在此推荐。
此外,您的标记无效,您需要在 li
周围添加 ul
元素。
让我们改变 DOM 并看看我们如何选择
<span class="icons"><!-- Better use div here -->
<ul>
<li class="oneLI">one <br /><span class="one">Show Me</span></li>
<li class="twoLI">two <br /><span class="two">Show me as well</span></li>
</ul>
</span>
.icons li > span {
opacity: 0;
}
.icons li:hover > span {
opacity: 1;
}
我怎样才能做到这一点?
<div class="icons">
<span class="hoverme">Hover Me</span>
<div id="hover1">First</div>
<span class="hoverme">Hover Me</span>
<div id="hover2">Second</div>
</div>
.icons > div[id] {
opacity: 0;
height: 100px;
width: 100px;
background: red;
}
.icons > span {
display: block;
}
.icons > span:hover + div {
opacity: 1;
}
如果您不想使用 opacity
,您也可以使用 display
或 visibilty
属性,因为它们非常适合您需要的时候使用 transition
转换元素。
Demo 3 (如果您要使用 opacity
方法,请使用 transition
)
关于html - 带悬停的 CSS 兄弟选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21341157/