1

私はこのコードを持っています

html

<div id="addQuesion">
    <ul id="aQul">
        <li class="aQli"></li>
        <li class="aQli"></li>
    </ul>
</div>

そして私のjQueryは

jQuery

$(document).ready(function(){
    $(".aQli").mouseover(function(){

    });
    $(".aQli").mouseout(function(){

    });
});

私は、liの上にカーソルを置いたときに背景を赤くし、そのliから出ると背景を白に戻す必要があります。これどうやってするの？

4

5 に答える 5

9

jQueryを使用する必要がありますか?

より「正しい」方法は、ホバー スタイルをクラスに追加することです。

.aQli:hover{
   background-color: red;   
}​

例については、こちらを参照してください。 http://jsfiddle.net/maurice_butler/5q6QM/

于 2012-05-10T00:53:29.917 に答える
4

これを単純化して .hover() を使用できます。

$(document).ready(function(){
    $(".aQli").hover(function(){
        $(this).css("background", "#F00");
    },
    function(){
        $(this).css("background", "#FFF");
    });
});

最初の関数はマウスオーバーに対して実行され、2 番目の関数はマウスアウトに対して実行されます。.css() 関数は、CSS プロパティを設定します。この場合、ホバーされた要素の背景色です。

于 2012-05-10T00:49:25.983 に答える
4 
$(function(){
    $(".aQli").on('mouseover', 'li', function(){  //using "on" for optimization
        this.style.backgroundColor = 'red';       //native JS application
    }).on('mouseout', 'li', function(){           //chain to avoid second selector call
        this.style.backgroundColor = 'white';     //native JS application
    })
});
于 2012-05-10T00:49:36.733 に答える
2

jQuery を使用してそれを行う 2 つの方法を思いつきました。1 つの方法は、jQuery を使用して css を直接変更し、.css() を使用して背景色を設定することです。

//css
ul#aQul li{
  display : inline-block;
  padding : 5px;
  margin : 5px;
}

//javascript use jQuery
$(document).ready(function(){
 $(".aQli").mouseover(function(){
    $(this).css({
        "background-color" :　"red",
        "cursor" : "pointer"
    });
 });
 $(".aQli").mouseout(function(){
    $(this).css({
        "background-color" : "transparent",
        "cursor" : "default"
    });

 });
});​​

もう 1 つの方法は、jQuery を使用して、ホバーが発生した場合に特定のクラス属性を追加することです。また、背景色を変更する特定の CSS ルールがあります。

//css, need to specify the state of hover
 ul#aQul li.hover{     //li elements which have "hover" class
   cursor:pointer;
   background-color : red;
 }

//javascript
$(document).ready(function(){
 $(".aQli").mouseover(function(){
    $(this).addClass("hover")      //hover, add class "hover"
 });
 $(".aQli").mouseout(function(){
    $(this).removeClass("hover");  //hover out, remove class "hover"

 });
});​
于 2012-05-10T03:43:37.630 に答える