color of the <li> change in on mouse over and click event using jquery

Question

Welcome To Ask or Share your Answers For Others

color of the <li> change in on mouse over and click event using jquery

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

color of the <li> change in on mouse over and click event using jquery

I want to change the color of the li as red on mouse over. And keep the same color in click event also. I have the following list,

<html>
  <body>
     <ul>
        <li>list1</li>
        <li>list2
            <ul>
               <li>sublist1</li>
               <li>sublist2</li>
               <li>sublist3</li>
               <li>sublist4</li>
            </ul>
         </li>
         <li>list3</li>
         <li>list4</li>
     </ul>
  </body>
</html>




list1
list2
  sublist1
  sublist2
  sublist3
  sublist4
list3
list4

If i click the list1, it color should be change into red, at the same time if i mouse over the other list it will be displayed as red. Its default color is black.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T17:57:45+0000

// CSS: Create the highlight accessible with two classnames.

.highlight, .highlight_stay{
    color:red;
}

Jquery

$(function(){
     $('li').hover(function(){
          $(this).addClass('highlight');
      }, function(){
          $(this).removeClass('highlight');
      });

      $('li').click(function(){
           $(this).addClass('highlight_stay');
      });
});

To remove the click color when a different li is clicked change the last function to this:

$('li').click(function(){
     $(li).removeClass('highlight_stay');
     $(this).addClass('highlight_stay');
});

Categories

color of the <li> change in on mouse over and click event using jquery

color of the <li> change in on mouse over and click event using jquery

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags