2

jQuery を使用してホバー アクションを作成しようとしていますが、セレクターが機能していないと思います。HTMLは次のとおりです。

<div id="footer">
            <ul>
                <li><a href="#">Start a Something</a></li>
                <li><a href="#">Send a Gift</a></li>
                <li><a href="#">How It Works</a></li>
                <li><a href="#">Secure Service</a></li>
                <li><a href="#">About Company</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>

            <ul>
                <li>&copy; 2012 Company</li>
                <li><a href="#">Terms of Use and Privacy</a></li>
            </ul>
        </div>

そして、ここにjQueryがあります：

$('#footer ul li').mouseover(function(){
        $(this).animate({
            color: "white"
        }, 200);
    }).mouseout(function(){
        $(this).animate({
            color: "#bcbdbd"
        }, 200);
});

どのセレクターを使用すればよいですか?

4

4 に答える 4

5

なぜ、このタスクに jQuery を使用しているのですか?

生CSS！

#footer ul li a { /* or even just "#footer a" */
    color: #bcbdbd;
    transition: color 0.2s ease;
    -webkit-transition: color 0.2s ease;
    /* Chrome does not yet support the un-prefixed version */
}
#footer ul li a:hover { /* same comment as above */
    color: #fff;
}
于 2013-01-10T01:59:06.033 に答える
3 
$('#footer ul li a').hover(...

それらはリンクなので、色を<li>変更しても変更されません。

于 2013-01-10T01:56:11.223 に答える
2

私はあなたが使用する必要があると思います：

$('#footer ul li a');

セレクターは間違っていませんが、<a>代わりにこれらのアクション ハンドラーとアニメーションをタグに適用する必要があります。

ラッピングで色を調整しても、タグ<li>のデフォルトの色は上書きされません<a>

編集：

達成したいことの答えに関しては、CSS :hover を JQuery だけでオーバーライドしようとすると問題が発生します。しかし、JQuery UI はhttp://api.jquery.com/jQuery.cssHooks/を animate() http://jqueryui.com/animate/で採用しています。

それを使用して、.hover() または .mouseover() で animate を使用すると、デフォルトの CSS :hover プロパティがオーバーライドされ、JQuery のアニメーションが使用されます。

例： http: //jsbin.com/udahe3/399/

SO の別の場所で回答: a:hover を jQuery でオーバーライドしますか?

于 2013-01-10T01:55:59.937 に答える
1

代わりにA要素をターゲットにすることができます。

$('#footer ul a')
于 2013-01-10T01:58:04.143 に答える