[英]Show siblings when I hover over an element
I have a span
element that's classed. 我有一个已分类的
span
元素。 When I hover over a child element, I want the siblings to all fade in. How can I achieve this? 当我将鼠标悬停在子元素上时,我希望所有兄弟姐妹都淡入。如何实现此目的?
SCSS code SCSS代码
.move-tools {
> a {
opacity: 0.0;
a ~ a:hover {
opacity: 1.0;
transition: opacity 0.5s ease-in-out;
}
&:hover {
opacity: 1.0;
transition: opacity 0.5s ease-in-out;
}
}
}
HTML code HTML代码
<div>
<span class="move-tools">
<a href title="Move to bottom">Move to bottom</a>
<a href title="Move down one place">Move down</a>
<a href title="Move up one place">Move up</a>
<a href title="Move to top">Move to top</a>
</span>
</div>
Here's a link to the JSFiddle. 这是到JSFiddle的链接。
I tried to use the a ~ a
selector to bring the opacity of the sibling elements through, but I think I'm misunderstanding the documentation. 我试着用
a ~ a
选择,使通过同级元素的不透明度,但我想我误解的文件。
Your code says that you need to hover the siblings to fade them in. The correct logic would be to react on the hover over your a and the select the siblings. 您的代码说您需要将兄弟姐妹悬停以使其淡入。正确的逻辑是对悬停在您的a和选择兄弟姐妹上的对象做出反应。 Updated JSFiddle .
更新了JSFiddle 。
.move-tools {
> a {
opacity: 0.0;
&:hover ~ a {
opacity: 1.0;
transition: opacity 0.5s ease-in-out;
}
&:hover {
opacity: 1.0;
transition: opacity 0.5s ease-in-out;
}
}
}
Unfortunately you can't select previous siblings this way. 不幸的是,您不能以这种方式选择以前的兄弟姐妹 。 A possible workaround would be to use some javascript that selects the previous siblings of the hovered element.
可能的解决方法是使用一些JavaScript选择悬浮元素的先前同级。 Another version of the JSFiddle with JQuery .
带有JQuery的JSFiddle的另一个版本。
you can set opacity to every links once you hover the span and then overwrite the opacity when you hover a link: 您可以将鼠标悬停在跨度上,然后为每个链接设置不透明度,然后在悬停链接时覆盖不透明度:
.move-tools:hover {
a {
opacity: 0.0;
transition: opacity 0.5s ease-in-out;
}
& a:hover {
opacity: 1.0;
}
}
html&css snippet for demo or fiddle 用于演示或提琴的 html&css片段
.move-tools:hover a { opacity: 0.0; transition: opacity 0.5s ease-in-out; } .move-tools:hover a:hover { opacity: 1.0; }
<div> <span class="move-tools"> <a href title="Move to bottom">Move to bottom</a> <a href title="Move down one place">Move down</a> <a href title="Move up one place">Move up</a> <a href title="Move to top">Move to top</a> </span> </div>
You might need to use javascript/jQuery because CSS cannot select previous siblings, only following siblings. 您可能需要使用javascript / jQuery,因为CSS不能选择以前的兄弟姐妹,而只能选择后面的兄弟姐妹。 It's a bummer.
真是可惜
But going with what you have, the next siblings aren't lighting up because a ~ a:hover should be a:hover ~ a, which is "When I hover over a, select its siblings." 但是,按照现有的方式,下一个兄弟姐妹不会点亮,因为a〜a:hover应该是a:hover〜a,即“当我将鼠标悬停在a上时,选择其兄弟姐妹”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.