7

mouseover、mouseout、addClass、およびremoveClassの組み合わせを使用して、単純なマウスオーバー効果を作成しようとしています。基本的に、ユーザーが要素の上にマウスを置くと、別の境界線（1pxの破線の灰色）を適用したいと思います。初期状態は「1pxソリッドホワイト」です。「ハイライト」というクラスがあり、「境界線：1pxの破線の灰色」が含まれています。そのクラスのonmouseoverを追加し、onmouseoutで削除したいのですが、「highlight」クラス内で！importantを使用しない限り、必要な効果を得ることができません。

4

7 に答える 7

14

javascriptがそのまま正常に機能しているように聞こえますが、CSSルールの特異性に問題があるため!important、機能します。

ハイライトされたcssルールをハイライトされていないルールよりも具体的にする必要があります。

#someItem ul li { /* Specificity = 102 */
    border-color: white;
}

.highlight { /* Specificity = 10 -- not specific enough! */
    border-color: grey;    
}

#someItem ul li.highlight { /* Specificity = 112 -- this will work */
    border-color: grey;    
}

さらに説明を付けて編集し
ます。HTMLの関連部分が次のようになっているとします。

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

そしてあなたはこのCSSを持っています：

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

現在、のすべてのリストアイテムにはul白い#someItem div境界線があり、クラスhighlightがないため灰色にはなりません。

必要な手段（この場合はjQueryのホバーイベント）を使用して、アイテムの1つにクラスを追加します。

$(this).addClass('highlight');

HTMLは次のようになります。

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

これまでのところ、JavascriptとHTMLは正常に機能していますが、灰色の境界線は表示されません。問題はCSSです。ブラウザが要素のスタイルを設定する方法を決定しようとすると、要素を対象とするすべての異なるセレクタと、それらのセレクタで定義されたスタイルが調べられます。同じスタイルを定義する2つの異なるセレクターがある場合（この場合、境界線の色が競合します）、適用するスタイルと無視するスタイルを決定する必要があります。これは、「特異性」と呼ばれるもの、つまりセレクターがどれだけ特異的であるかによって行われます。HTML Dogの記事で概説されているように、セレクターの各部分に値を割り当てることでこれを行い、スコアが最も高い部分が優先されます。ポイントは次のとおりです。

  • 要素セレクター（例： "ul"、 "li"、 "table"）=1ポイント
  • クラスセレクター（例： "。highlight"、 "。active"、 "。menu"）=10ポイント
  • IDセレクター（例： "＃someItem"、 "＃mainContent"）=100ポイント

さらにいくつかのルールがあります。たとえば、キーワード!importantとインラインスタイルですが、これにはほとんど関係ありません。うーん...「レッスン」。他に知っておくべきことは、2つのセレクターが同じ特異性を持っている場合、ファイルの後半で定義されたセレクターが優先されるということです。

問題に戻ると、以前のCSSを考えると、まだ灰色の境界線がない理由がわかります。

#someItem ul li =id+要素+要素=100+ 1 + 1=102ポイント
.highlight=クラス=10ポイント

前述のように、解決策はより具体的なセレクターを作成することです。

#someItem ul li.highlight
   =id+要素+要素+クラス
   = 100 + 1 + 1 + 10
   =112ポイント

また、コメントで質問に答えるために、これを機能させるためにJavaScriptやHTMLを変更する必要はありません。そのセレクターを分解すると、次のようになります。

IDが「someItem」の要素を探し、その中でul要素を探し、次にクラス「highlight」を持つli要素を探します。

...そして今、.addClass()あなたが以前に行った単純な呼び出しを考えると、liこれらの条件を満たすので、境界線は灰色に変わるはずです。

于 2009-05-11T04:20:10.260 に答える
6

Jquery 1.3.3から、これをもう少し簡単に行うことができるようになります。非常に強力な.toggleClass（）の拡張バージョンが利用可能になります。

これを関数に分割する必要がない場合は、1.3.3から次のようにすることができます。

$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });

！importantを含める必要がある場合は、ハイライトクラスをより具体的にする必要があります（CSSの特異性を参照）。

于 2009-05-11T03:36:58.410 に答える
1

初期スタイルの要素にインラインスタイルを使用していると思います。

<style type="text/css">
  .hover { border: 1px dashed gray; } /* will never apply */
</style>

...

<!-- this style has priority over class styles! -->
<div style="border: 1px solid white"> 
...
</div>

これにより、クラスを使用して適用されたスタイルが上書きされます...したがって、インラインスタイルを使用する代わりに、別の初期クラスを使用して初期スタイルを適用します。

<style type="text/css">
  .normal { border: 1px solid white; }
  .hover { border: 1px dashed gray; }
</style>

...

<div class="normal">
...
</div>
于 2009-05-11T01:16:03.150 に答える
0

CSS：

div.target {
    border: 1px solid #000000;
}

div.target-hover {
    border-color: #ff0000;
}

JS：

$("div.target").hover(
    function () {
        $(this).addClass("target-hover");
    },
    function () {
        $(this).removeClass("target-hover");
    }
);

私は通常このようにします。（より多くのオプションを許可します）

于 2009-05-11T02:21:33.947 に答える
0

純粋なCSSアプローチを検討しましたか？

例えば：

someClass {
    border: 1px solid white;
}

someClass:hover {
    border: 1px dashed gray;
}

hover疑似クラスは、必要な動作を提供します。ユーザーが要素の上にマウスを置くと、下のスタイルが使用されます。それ以外の場合は、最初のスタイルが使用されます。

a注：誰かがコメントしたように、これはIEの非要素では機能しません。ただし、Chrome、Firefox、Safari、Operaでは機能します。

また、IE8およびIE7標準モードのすべての要素で機能します。ただし、テストするIE6はありません。

于 2009-05-11T01:16:44.350 に答える
0

これは私が使用したホバーの例です：

$(".myclass").hover(jbhovershow,jbhoverhide);


jbhovershow = function () {
            $(this).addClass("jimtest");
          }; 

jbhoverhide = function () {
            $(this).removeClass("jimtest");
          }

この単純なものを個別の機能に分割する必要はありません。

あなたの問題はcssの競合にあるのではないかと思います-ハイライトクラスをハードコーディングして適用するか、クリックして実際に機能しているかどうかを確認してください。

お役に立てば幸い

ジム

于 2009-05-11T01:22:02.827 に答える
0

または、次を使用して単純なCSSでそれを行うことができます。

#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }
于 2010-09-30T04:54:30.167 に答える