我是 JQuery 的新手,我尝试用它来做一些基本的技巧。所以基本上,我有一个由无序列表组成的简单导航,我想用 JQuery 更改当前鼠标悬停列表项的字体颜色,但我有问题,因为我的 JQuery 脚本正在更改所有列表项的字体颜色,我想仅更改当前鼠标悬停列表项的字体颜色,而不是全部。我试图获取当前鼠标悬停的列表项,但我不知道如何实现它以便我的 JQuery 仅更改该列表项。以下是图片:
我目前拥有的:http://i.imgur.com/8vWcOci.jpg
我想要什么:http://i.imgur.com/4yD0bIc.jpg
这是我的 JQuery 代码:
$(document).ready(
function(){
$('.nav1 ul li').mouseover(
function () {
var index = $( ".nav1 ul li" ).index(this);
$('.nav1 ul li a').css({"color":"white"});
}
);
$('.nav1 ul li').mouseout(
function () {
var index = $( ".nav1 ul li" ).index(this);
$('.nav1 ul li a').css({"color":"#6291d8"});
}
);
}
);
这是我的 HTML:
<nav class="nav1">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">THERAPIES</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">BOOKING</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">ABOUT ME</a></li>
</ul>
</nav>
最佳答案
代替:
$('.nav1 ul li a').css({"color":"white"});
和:
$('.nav1 ul li a').css({"color":"#6291d8"});
使用:
$(this).css({"color":"white"});
$(this).css({"color":"#6291d8"});
如果你想在 achor 标签上应用 css:
$(this).find("a").css({"color":"white"});
$(this).find("a").css({"color":"#6291d8"});
通过使用 $('.nav1 ul li a')
您正在更改所有 anchor 标记 css 但是通过使用 $(this)
将更改当前点击的元素CSS。
关于javascript - JQuery .mouseover 和 .mouseout 改变字体颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24044725/