CSS，悬停一个元素，会影响另一个元素 [英] CSS, hover one element, affect another

问题描述

当我悬停一个li a时，我可以影响另一个纯CSS元素吗？

因为我想让一个盒子滑入，作为背景元素，当我悬停我的链接。
完全喜欢这个网站导航，而不是激活时，它可以与悬停

  nav ul li a：hover {
 color：＃C3E1FF; 
 font-weight：700; 
} 
 
 nav ul li span：hover {
 -webkit-transform：translate（0px，0px）; 
 -webkit-transition：所有0.5s缓解; 
过渡：所有0.5s缓解; 
} 
 
 nav ul li span {
 height：43px; 
 width：300px; 
位置：绝对; 
背景颜色：＃47525D; 
 -webkit-transform：translate（300px，0px）; 
 -webkit-transition：所有0.5s缓解; 
过渡：所有0.5s缓解; 
 background-position：初始初始值; 
背景重复：初始初始; 
} 
  

提前致谢！

现在看起来如此;

http://jsfiddle.net/mbyc3tf9/

解决方案

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

  nav ul li a：hover> span {} 
  

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

this is my code

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;
}

thanks in advance!

This is how it looks now;

http://jsfiddle.net/mbyc3tf9/

解决方案

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

nav ul li a:hover > span {}

这篇关于CSS，悬停一个元素，会影响另一个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！