7

現在、jQuerycss()関数に少し問題があります。border-top-colorホバーすると、アンカー要素だけでなく、アンカー要素のcss値が変更されますborder-top-color。以下は私のコードです。

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

プロパティだけでなく、 #header #headerlist li aborder-top-colorとプロパティを変更するのはなぜですか？#header #headerlist li a:hover#header #headerlist li a:hover

4

5 に答える 5

20

あなたの例が機能しない理由は、それが純粋な CSS であるため、セレクターが :hover を検出する方法がないためです。代わりに、実際のjquery ホバー メソッドを使用してみてください。

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

または、addclass メソッドも使用できます。

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

これは、次のようにさらに単純化できます。

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});
于 2009-05-08T01:07:33.697 に答える
12

正確な理由はわかりませんが、この種の変更は CSS で行うほうがよいので、JS で変更する必要がある場合は、CSS クラスを作成してから JS で変更することをお勧めします。

CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

そうすれば、機能をプレゼンテーションからより適切に分離できます。

于 2009-05-08T00:55:11.310 に答える
1

それが機能しない理由は、:hoverビットが実際には要素に関する情報をセレクターに提供しないためです。

a:hoverとまったく同じ要素に一致する CSS aでは、ユーザーがそれらの要素にカーソルを合わせているときに、異なる一連のプロパティを定義しているだけです。

jQuery セレクターは、スタイルを設定するためではなく、要素を検索 (選択) するように設計されています。

このcss()メソッドは、選択された要素にインライン スタイルを設定するだけで、実際の CSS 宣言を追加または変更しません。

他の人が述べたように、hover()イベントを使用して同じ動作を得ることができます。ただし、別の回答者が説明したように、その場でクラスを追加する方がおそらく良いでしょう。

ただし、オンザフライで変更する必要がない場合は、より高速であり、ユーザーが JavaScript を有効にする必要がないため、プレーンな古い CSS を使用することをお勧めします。

于 2009-05-08T04:35:46.613 に答える
0

このコードは 1.9 以降壊れています

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

代わりにこれを使用してください

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}
于 2013-09-10T20:35:25.813 に答える
0

スタイルが上書きされないように、ホバー css に !important を追加します。例えば：

test:hover {
    border: 1.5px solid white !important;
    color: white !important;
}

于 2016-05-10T03:42:29.907 に答える