1

マウスオーバーでliの色を赤に変更したい。また、クリックイベントでも同じ色を保ちます。私は次のリストを持っています、

<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

list1 をクリックすると、色が赤に変わります。同時に、他のリストにマウスを合わせると、赤で表示されます。デフォルトの色は黒です。

4

3 に答える 3

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

.highlight, .highlight_stay{
    color:red;
}

Jクエリ

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

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

別のものがクリックされたときにクリックの色を削除するにはli、最後の関数を次のように変更します。

$('li').click(function(){
     $(li).removeClass('highlight_stay');
     $(this).addClass('highlight_stay');
});
于 2013-02-13T13:12:10.467 に答える
3

そのために css を使用します。

li:hover {
    color:red;
}

そして、これはお勧めできません:

li:focus {
    color: red;
}

JQuery

$('li').click(function(){
    $(this).css('color','red');
});
于 2013-02-13T13:14:54.823 に答える
2

マウスホバー - css

li:hover {
color: red;
}

クリックしたときだけ緑色にしたい場合 - css

li:active {
    color: green;
}

色を変えてその色のままにしたい場合 - JQuery

$("li").click(function (){
    $(this).css("color","green")
});

ただし、$("blah").addClass()DOM の読み込みを高速化するのに役立つため、読み進めることを検討することをお勧めします。JQuery でcss を$(this).css("color","green")「直接」使用すると、プロジェクトが大きくなるにつれて速度が低下する可能性があります

于 2013-02-13T13:43:03.273 に答える