CSS,悬停一个元素,影响另一个 [英] CSS, hover one element, affect another
本文介绍了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
这是我的代码
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;
}
提前致谢!
这就是现在的样子;
推荐答案
如果你需要移动span,当你把鼠标放在a上时,添加这个
If you need move the span, when you put your mouse over the a, add this
nav ul li a:hover > span {}
这篇关于CSS,悬停一个元素,影响另一个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文