3

ナビゲーション用に現在選択されているアイテム機能と組み合わせて、ホバー機能が必要でした。ホバー機能は、ページが最初に読み込まれたときに表示されます。ただし、項目を選択 (およびスクリプトを実行) した後、ホバー css が削除されたようで、その理由はわかりません。これが私のファイルです（jsfiddle）：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <link rel="shortcut icon" href="/favicon.ico">
      <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
      <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
      <title>TITLE</title>
      <style>
         ul {
            list-style: none;
         }

         li {
            background-color: orange;
            color: white;
            float: left;
            padding: 10px;
         }

         li:hover {
            background-color: grey;
            color: black;
         }
      </style>
   </head>
   <body>
      <ul>
         <li>one</li>
         <li>two</li>
         <li>three</li>
         <li>four</li>
         <li>five</li>
      </ul>

      <script type="text/javascript">
         $("li").click(function() {
            $("li").each(function() {
               $(this).css({'background-color' : 'orange',      
                            'color' : 'white'});      
            });
            setHighlighted(this);
         });

         var setHighlighted = function(ref) {
            $(ref).css({'background-color' : 'grey',
                        'color' : 'black'
            });
         }
</script>
   </body>
</html>
4

5 に答える 5

4

の style プロパティliを jQueryで割り当てているため

$("li").each(function () {
    $(this).css({
        'background-color': 'orange',
            'color': 'white'
    });
});

これは要素のスタイルタグに書き込みます。

 li:hover {
     background-color: grey;
     color: black;
 }

スタイル

コードを次のように変更します

$("li").click(function () {
    $("li").each(function () {
        $(this).css({
            'background-color': '',
                'color': ''
        });
    });
    setHighlighted(this);
});

JSFIDDLE

これにより、要素のスタイル プロパティからbackground-colorandが削除され、スタイルが優先されます。colorlili:hover

于 2013-09-09T09:47:15.960 に答える
0

これはもっと簡単だと思います：

li {
    padding: 10px;
    float: left;
    background-color: orange;
    color: white;
}

li:hover,
li.on {
    background-color: gray;
    color: black;
}

さらに、スタイリングは CSS のみに任せます。

$('ul').on('click', 'li', function(ev) {
    $(ev.delegateTarget).find('.on').removeClass('on');
    $(this).addClass('on');
});

このフィドルを参照してください：jsfiddle.net/rG4a5/

于 2013-09-09T10:06:21.023 に答える
0

最善の方法、そしてより軽い：

$("li").each(function () {
    $(this).click(function () {
       //Your function
    });
});

ここで、「アクティブな」ステートメントを設定するには、クラスを追加する必要があります。

.markup{ 
    background-color: grey;
    color: black;  
}

既存のアクティブな LI を削除した後、このクラスを適切な LI に設定します。

$("li").each(function () {
    $(this).click(function () {
        $(".markup").removeClass("markup")
        $(this).addClass("markup");
    });
});

このフィドルを見てください

于 2013-09-09T10:03:38.327 に答える
0

!important背景色の li:hover セレクターを追加するだけです。

li:hover {
            background-color: grey !important;
            color: black;
         }

デモ

于 2013-09-09T09:47:44.163 に答える