如何将css应用于光标所在的元素？

如果你能帮我解决我的问题，我将不胜感激。我试图将css应用到一个元素，即我的鼠标结束。如何将css应用于光标所在的元素？

<header> 
    <ul> 
    <li><a href="#">ShareImage</a></li> 
    <li><a href="#">ShareCode</a></li> 
    </ul> 
</header>

这就是菜单的样子。当你将光标放在它上面时，我想要将li元素的背景变亮。

我想是这样的

$(function(){ 
    $('header a').hover(function(){ 
    $(this).fadeIn(2000, function(){ 
     $('header ul li').css("background-color", "#3A3A3A"); 
    }); 
    }); 
})

但它不工作，我怎么想它的工作，我没有使用jQuery的一段时间，现在我什么都忘了。谢谢大家帮助我！

来源

2015-06-03 Danny

在你的CSS：

header ul li:hover { 
    background-color: #3A3A3A; 
}

无需jQuery的。

编辑：

对于评价要求的衰落效应，这是最简单的CSS（在此实例中为1秒衰落）：

header ul li:hover { 
    background-color: #3A3A3A; 
    transition: 1s; 
}

编辑2：

经验丰富，定义li:hover的过渡属性可以打破淡入/淡出效果。您需要为没有伪类的元素定义它。所以，我们最后的CSS代码如下：

header ul li { 
    transition: 1s; 
} 

header ul li:hover { 
    background-color: #3A3A3A; 
}

来源

2015-06-03 18:59:14 lucasnadalutti

是的，我知道，它的解决方案，但我想让它那种动画的，我想要淡出效果。 – Danny

@lucas：这会影响列表项目的悬停，而不是在锚点上，但这可能是问题，也可能不是问题。 –

@Danny这在CSS3中也是可以的。我会更新答案。 – lucasnadalutti

解决方案1

使用Hover在CSS

喜欢把这个代码在头

<STYLE type="text/css"> 
    ul{background-color:#fff;} 
    li:hover 
    { 
     background-color:#ff0000; 
    } 
</STYLE>

解决方案2

使用jQuery功能

$('li').mouseover(function(e) 
{ 
    e.stopPropagation(); 
    $(this).addClass('hover'); 
}); 

$('li').mouseout(function() 
{ 
    $(this).removeClass('hover'); 
});

来源

2015-06-03 19:00:42

这里是一个可能的解决方案：

$('header a').hover(function(){ 
 
    $('header ul li').css("background-color", "#FFFFFF"); 
 
    $(this).fadeIn(2000, function(){ 
 
     $(this).parent().css("background-color", "#3A3A3A"); 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <ul> 
 
    <li><a href="#">ShareImage</a></li> 
 
    <li><a href="#">ShareCode</a></li> 
 
    </ul> 
 
</header>

来源

2015-06-03 19:02:51

如何将css应用于光标所在的元素？

回答

相关问题