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

CSS, hover one element, affect another(CSS,悬停一个元素,影响另一个)

本文介绍了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 {}

这篇关于CSS,悬停一个元素,影响另一个的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:CSS,悬停一个元素,影响另一个

基础教程推荐