JQueryの.mouseoverと.mouseoutのフォントの色の変更 - javascript、jquery、html、css、fonts

私は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>

回答：

回答№1は2

の代わりに：

$(".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を変更します。

---

回答№2の場合は1

なぜ JQuery？

つかいます a:hover に css それはかなりきれいです。

次のように：

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

他のすべてのリンクについては、再び使用できます a そして a:hover また、 a:active 追加機能を提供します。

---

回答№3の場合は1

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() これも数文字節約できます。

---

回答№4の場合は1

ここではJSは必要ありません。 CSSを使用できます :hover 疑似クラス：

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

例フィドル

---