JQuery .mouseover і .mouseout змінюють колір шрифту - javascript, jquery, html, css, шрифти

Я новачок в 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>

Відповіді:

2 для відповіді № 1

Замість:

$(".nav1 ul li a").css({"color":"white"});

і:

$(".nav1 ul li a").css({"color":"#6291d8"});

використання:

$(this).css({"color":"white"});
$(this).css({"color":"#6291d8"});

якщо ви хочете застосувати css до тегу achor:

$(this).find("a").css({"color":"white"});
$(this).find("a").css({"color":"#6291d8"});

З допомогою $(".nav1 ul li a") ви змінюєте всі прив’язні теги css, але за допомогою $(this) змінить поточний елемент css.

---

1 для відповіді № 2

Чому JQuery?

використовувати a:hover в css це чистіше.

Люблю:

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

Для всіх інших посилань ви можете знову використовувати a і a:hover також a:active надасть вам додаткову функціональність.

---

1 для відповіді № 3

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". Якорі мають власні стилі за замовчуванням, тож переосмислюйте, що вам слід націлити їх, а не елемент батьківського списку. Я також замінив вашу mouseover і mouseout з hover спосіб економить кілька символів. Нарешті, я використав більш базову версію одного властивості .css() що також економить кілька символів.

---

1 для відповіді № 4

Тут немає потреби в JS. Ви можете використовувати CSS :hover клас псуедо:

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

Приклад скрипки

---