[javascript] jQueryのホバーとクラスセレクター


Answers

この種の単純なやり取りにJavaScriptを使用しないことをお勧めします。 CSSはそれを実行する能力があり(Internet Explorer 6でも)、JavaScriptを使用するよりもはるかに反応がよくなります。

":hover" CSS擬似クラスを使用できますが、Internet Explorer 6で動作させるには、 "a"要素で使用する必要があります。

.menuItem
{
    display: inline;
    background-color: #000;

    /* width and height should not work on inline elements */
    /* if this works, your browser is doing the rendering  */
    /* in quirks mode which will not be compatible with    */
    /* other browsers - but this will not work on touch mobile devices like android */

}
.menuItem a:hover 
{
    background-color:#F00;
}
Question

次のHTML、CSS、およびJavaScriptを使用して、divの背景色を動的に変更することはできません。 HTML:

<div id="menu">
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
    <div class="menuItem"><a href=#>Bla</a></div>
</div>

CSS:

.menuItem{
  display:inline;
  height:30px;
  width:100px;
  background-color:#000;

Javascript:

$('.menuItem').hover( function(){
     $(this).css('background-color', '#F00');
},
function(){
     $(this).css('background-color', '#000');
});

編集:私はCSSの方法を使用したくない理由があったと言うことを忘れてしまった。

DOMがロードされたかどうかを確認するのは本当に忘れました。




誰かが最初の質問を読んで、ホバーcssを動的に変更したいのですが、要素の基本CSSルールを変更するだけでなく、

私は動的に読み込まれたページを持っているので、データがロードされた後のコンテナの高さを調べる必要があります。 読み込まれたら、CSSのホバー効果を変更して、結果のコンテナを要素がカバーするようにしたい。 私はcss .daymark:hoverルールを新しい高さに変更する必要があります。 こうやって...

function changeAttr(attrName,changeThis,toThis){
    var mysheet=document.styleSheets[1], targetrule;
    var myrules=mysheet.cssRules? mysheet.cssRules: mysheet.rules;

    for (i=0; i<myrules.length; i++){
        if(myrules[i].selectorText.toLowerCase()==".daymark:hover"){ //find "a:hover" rule
            targetrule=myrules[i];
            break;
        }
    }
    switch(changeThis)
    {
        case "height":
            targetrule.style.height=toThis+"px";
            break;
        case "width":
            targetrule.style.width=toThis+"px";
            break;
    }

}



test.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>jQuery Test</title>
        <link rel="stylesheet" type="text/css" href="test.css" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body>
        <div id="menu">
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
            <div class="menuItem"><a href=#>Bla</a></div>
        </div>
    </body>
</html>

test.css

.menuItem
{

    display: inline;
    height: 30px;
    width: 100px;
    background-color: #000;

}

test.js

$( function(){

    $('.menuItem').hover( function(){

        $(this).css('background-color', '#F00');

    },
    function(){

        $(this).css('background-color', '#000');

    });

});

作品:-)




クラスを作成することで、常に簡単で簡単に保つ

.bcolor {背景:#F00; }

次に、addClass()およびremoveClass()を使用して終了します。




これはより効率的です。

$(".menuItem").hover(function(){
    this.style.backgroundColor = "#F00";
}, function() {
    this.style.backgroundColor = "#000";
});



Links