CSS，悬停一个元素，影响另一个

2022-01-22 00:00:00 elements hover css

当我将鼠标悬停在li a"上时，我会影响纯 CSS 中的另一个元素吗?

When i hover a "li a" can i then affect another element in plain CSS?

因为当悬停我的链接时，我试图让一个框作为背景元素滑入.就像这个网站导航一样，它不是在激活时而是在悬停时工作

becuase I'm trying to make a box slide in, as a background element, when hovering my link. Exactly like this sites navigation, just instead of when activated, it works with hover

http://www.zindhai.com

这是我的代码

nav ul li a:hover{
    color: #C3E1FF;
    font-weight: 700;
}

nav ul li span:hover{
    -webkit-transform:translate(0px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
}

nav ul li span{
    height:43px;
    width:300px;
    position: absolute;
    background-color:#47525D;
    -webkit-transform:translate(300px, 0px);
    -webkit-transition:all 0.5s ease-out;
    transition:all 0.5s ease-out;
    background-position:initial initial;
    background-repeat:initial initial;
}

提前致谢！

这就是现在的样子；

http://jsfiddle.net/mbyc3tf9/

推荐答案

如果你需要移动span，当你把鼠标放在a上时，添加这个

If you need move the span, when you put your mouse over the a, add this

nav ul li a:hover > span {}

相关文章