0

次のマークアップがあります。

<div class="nav-font  nav-item-3">
    <a href="/arc/place" class="top_nav">favorite places</a>
</div>

お気に入りの場所のリンクの色をターゲットにしたいと考えています。私は次のjqueryを持っています:

$('.nav-font').on('mouseover',function(){
  //console.log('here i am');
  $(this).addClass('light-color');
});

ただし、a:hover はオーバーライドされません。ここで値をより具体的にどのように設定しますか?

どうも

更新＃1：

これがサンプルcssです（どちらかを実行しています）。最初のものはより「具体的」になると思いましたが、私が持っている標準の a:hover がまだ優先されています。助けてくれてありがとう！

.light-class a:hover{
  color: #f5e9d1;
}

.light-class{
  color: #f5e9d1;
}
4

3 に答える 3

2

リンクに影響を与えるのと同じ方法で影響を与えます。CSSで宣言することにより：

.light-color a{
    color:#ff6600;
}

.light-color a:hover{
    color:#ff0066;
}

明らかに独自の色を使用し、セレクターを適切にしますが、それが一般的な考え方です。

ただし、この回答が思いがけないものである場合は、css を投稿して、.light-color で何をしているかを正確に確認することもできます。

編集：

したがって、すでにこれを試している場合は、おそらくセレクターをより具体的にすると、新しく追加されたクラスの優先度が高くなります。

.nav-font.light-color a.top_nav, .nav-font.light-color a.top_nav:hover{
    color: #f5e9d1;
}
于 2012-12-04T01:46:43.593 に答える
0

私が質問を正しく理解していれば、ホバー用の CSS で既に色が定義されていると言っています。おそらく次のようなものです：

.top_nav:hover {
    color: #990000;
}

新しい .light-color クラスを適用するときにオーバーライドされることを確認したいと思います。これらの仮定が正しい場合は、色をオーバーライドするセレクターが通常のホバーよりもCSS 固有性が高いことを確認してください。このような何かがうまくいくはずです：

.light-color .top_nav:hover {
    color: #000099;
}

さらに詳細が必要な場合は、スタイルが最初のホバー カラーをオーバーライドするまで、セレクターに追加し続けることができます。

div.nav-font.nav-item-3.light-color a.top_nav:hover {
    color: #000099;
}

通常、絶対に必要なだけ具体的にしようとするので、後でスタイルを再度オーバーライドする必要が生じた場合に、自分を傷つけることはありません。特異性に関するいくつかのドキュメントを確認してください。

個人的には、次のルールを守るようにしています。

  • 絶対に避けてください！
  • #my_id のような ID セレクターは、オーバーライドするのが非常に難しいため、可能な限り避けてください。
  • 単に .my_class で済む div.my_class のような特定のセレクター。これは特異性のオーバーライドに役立ちますが、div 以外でクラスを再利用したい場合は、より柔軟になります。
于 2012-12-04T01:57:43.880 に答える
0

あなた.onはオン.nav-fontになっているので、そこにクラスを追加しています。はa:hover内側にあり、そのコンテナを無効にします。代わりにこれを行う場合：

$('.nav-font a').on('mouseover',function(){
  $(this).addClass('light-color');
});

a次に、代わりに をターゲットにし、$(this)を参照してaそこにクラスを追加します。これは次のように省略できます。

$('.nav-font a').hover(function() {
  $(this).toggleClass('light-color');
});
于 2012-12-04T01:50:09.380 に答える