jQuery .mouseover和.mouseout更改字體顏色

Question

我是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>

Answer 1

代替：

$('.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')您將更改所有錨標簽css，但是通過使用$(this)將更改當前單擊的元素css。

Answer 2

這里不需要JS。 您可以使用CSS :hover psuedo類：

.nav1 ul li a { 
    color: #6291d8;
}
.nav1 ul li a:hover {
    color: #FFF;
}

小提琴的例子

Answer 3

為什么選擇JQuery ？

在css使用a:hover會更干凈。

喜歡：

.nav1 ul li a { 
    color: #6291d8;
}
.nav1 ul li a:hover{
color:white;
}

對於所有其他鏈接，您可以再次使用a和a:hover a:active將為您提供其他功能。

Answer 4

this是JavaScript中的一個特殊詞，指的是觸發事件的元素。 在jQuery中，您可以使用$(this) 。 因此，您可以將代碼替換為：

$(document).ready(function () {
    $('.nav1 ul li a').hover(function () {
        $(this).css("color", "white");
    }, function () {
        $(this).css("color", "#6291d8");
    });
});

jsFiddle示例

注意，我還將選擇器更改為'.nav1 ul li a' 。 錨點具有其自己的默認樣式，因此要覆蓋它們，您應該以錨點為目標，而不是父列表項。 我還用hover方法替換了mouseover和mouseout ，因為它節省了一些字符。 最后，我使用了.css()的更基本的單屬性版本，該版本還節省了一些字符。