2

私は少し jQuery を学んだばかりで、単純な色の変化効果のためにそれを使用しようとしています。<div#foo と #bar という2 つの > があるとします。#foo には多くの URL があり、次の CSS が定義されています。

#foo a {color: blue; border-bottom: 1px dashed blue}
#foo a:hover {color: black; border-bottom: 1px solid black}

ここで、ユーザーが #bar をクリックしたときに #foo のリンク (a:link) の色を変更したいのですが、a:hover の色はそのままにしておきたいので、関数を次のように記述します。

//...
$("#bar").click(function () {
  $("#foo a").css("color", "red");
});
//...

問題は、この関数はすべてのリンクを赤に変更しますが、a:hover の色が失われることです。つまり、ユーザーがカーソルをリンクに移動すると、期待どおりに黒にならず、赤のままになります。

<ajQuery が#foo 内の >s にインライン スタイルを配置し、それらを<a style="color:red;" href="..."> にすることがわかっているので、これは :hover 疑似クラスを上書きすると思います。疑似クラスのインラインスタイル属性は誰にも実装されていないため、意図した効果が得られるかどうかは疑問です...

それでも、次のようなものを書く必要のない解決策はありますか

$("#foo a").hover(
    function(){ $(this).css("color", "black");},
    function(){ $(this).css("color", "blue");}
)

?

ありがとう。

4

5 に答える 5

6

Javascript からの CSS 疑似クラス ルールの設定から抽出

実際には、ホバーまたは:afterまたはjavascriptで必要な疑似クラスを使用して、クラスの値を変更できます。

$(document).ready(function()
{
    var left = (($('.selected').width() - 7) / 2) + 'px';
    document.styleSheets[1].insertRule('.selected:after { left: ' + left + '; }', 0);
    document.styleSheets[0].cssRules[0].style.left = left;
});

これが誰にも役立つことを願っています。

于 2011-05-12T16:17:47.297 に答える
3

!important は、少なくとも Firefox では、css プロパティをインライン スタイルよりも強力にしているようです。スタイルを次のように変更してみてください。

#foo a:hover { color: black !important; }
于 2009-01-28T01:54:34.630 に答える
2

私の知る限り、jQueryは疑似クラスを設定できません。ただし、別の方法があります。

http://www.4pmp.com/2009/11/dynamic-css-pseudo-class-styles-with-jquery/

于 2009-11-10T12:20:12.310 に答える
1

次のように、リンクにカーソルを合わせたときに、追加したクラスを削除できます。

$('#bar').click(function() {
  $('#foo a').css('color', 'red');
});
$('#foo').hover() {
  $'#foo a').removeCss('color', 'red');
});

[編集]: 最初にクラスが存在するかどうかを確認するために、IF ステートメントを追加する必要がある場合があります。

于 2009-01-28T01:56:06.143 に答える
0

Javascript を使用してこれを行うもう 1 つの厄介な方法は、コンテナー要素を空にして、コンテンツを再度入力し、クリック イベントを再度セットアップすることです。これにより、すべての状態とイベントが破棄されるため、再度セットアップする必要がありますが、大量のデータを含まない単純なものの場合は機能します!

:hover クラスを使用するナビゲーション メニューに使用します。

$('#page_nav ul').click(clearNavMenu_Hover);

function clearNavMenu_Hover() {
    var tmpStore=$('#page_nav').html();
    $('#page_nav').empty();
    $('#page_nav').html(tmpStore);
    $('#page_nav ul').click(clearNavMenu_Hover);
}
于 2014-03-08T19:56:28.947 に答える