简体   繁体   中英

How to change color of hovered menu item in jquery?

I am a beginner. I have written this code on JSFiddle. I want to set the color of selected menu-item to yellow and other menu-items to aqua. Please guide me.

$(function () {
    $('nav ul li').not("nav ul li ul li").hover(function (e) {
        $("nav ul li ul").hide();
        $(this).children('ul').stop().toggle();
        e.stopPropagation();
    });
});
$(document).hover(function () {
    $("nav ul li ul").hide();
});

JSFiddle link

The CSS Way:

li
{
   color:aqua;
}

li:hover
{
   color:yellow;
}

The JQuery Way

 $(".someClass li").css("color","aqua"); $(".someClass li").hover(function(){ $(this).css("color","yellow");},function(){$(this).css("color","aqua");}); 
 ul li { list-style:none; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="someClass"> <li>Text1</li> <li>Text2</li> <li>Text3</li> </ul> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM