0

CSSでは、1つの要素にカーソルを合わせると、特定の要素内にネストされている要素のプロパティを変更できないことを知っています。そのため、jqueryを使用して、指定された要素内にネストされている要素のプロパティを変更してきました。私のコードは次のとおりです。

<?php
    for($i=0;$i<$count;$i++)
    {
?>   
   <tr>
       <td>Sample</td>
       <td>Text</td>
   </tr>
<?php
    }
?>
<script type="text/javascript">
    $(document).ready(function(){

   $('tr').each(function(index) {
        $(this).hover(function() {  
            $(this).css("color", "#ffffff");    
            $(this).css("background-color", "#0080ff");
        });

        $(this).mouseout(function() {   
            $(this).css("color", "#222222");
            $(this).css("background-color", "#f0f0f0"); 
        });
    });
});
</script>

問題は、タグにカーソルを合わせると、マウスアウトアクションがトリガーされ、フォントの色が＃222222に戻されることです。タグにカーソルを合わせるか、その中のすべてで、行の背景色は＃0080ffに設定され、font-colorは#ffffffに設定されます。助言がありますか？

4

3 に答える 3

2

CSSを使用して、ホバーされているオブジェクト内の要素をターゲットにできると思います。

あなたの場合：

tr {
    color: #222;
    background-color: #f0f0f0;
}

tr:hover {
    color: #fff;
    background-color: #0080ff;
}

これがjsfiddleです

JavaScriptが実行しているように見えます-CSSプロパティを変更します。私はあなたの質問を正しく解釈していますか？

于 2012-10-08T23:28:23.880 に答える
0

の2番目のパラメータを使用する必要がありhover()ます。コードは次のようになります。

$('tr').each(function(index) {
        $(this).hover(function() {  
            $(this).css("color", "#ffffff");    
            $(this).css("background-color", "#0080ff");
        }, function(){   
            $(this).css("color", "#222222");
            $(this).css("background-color", "#f0f0f0"); 
        });
});
于 2012-10-08T23:24:13.657 に答える
0

mouseleaveこれは、マウスが完全に要素の外側にある場合にのみトリガーされ、要素の子にある場合にはトリガーされないため、必要です。それで

$(this).mouseout(...)

する必要があります

$(this).mouseleave(...)

または、単に行うことができます

$('tr').each(function(index) {
    $(this).hover(function() {  
        $(this).css("color", "#ffffff");    
        $(this).css("background-color", "#0080ff");
    }, function() {   
        $(this).css("color", "#222222");
        $(this).css("background-color", "#f0f0f0"); 
    });
});

これは実際に最初の関数をmouseenterハンドラーとしてバインドし、2番目の関数をハンドラーとしてバインドしmouseleaveます。

于 2012-10-08T23:24:50.167 に答える