3

div と div:before があります。マウスが :before 要素の上に移動 (ホバー) すると、その色が変わります。cssやjQueryに関係なくそれを行う方法はありますか?

div:before:hover のようなものを試しましたが、何も起こりませんでした

前もって感謝します

4

5 に答える 5

7

解決策 1

（質問を解決しません）cssだけで：

span:before {
    color: red;
    content: "hi";
}
span:hover:before {
    color: blue;
}

html

<span>text</span>

編集：フィドルhttp://jsfiddle.net/bwkM6/

解決策 2

:before なしで特定の問題を回避する

http://jsfiddle.net/Z97uN/1/

于 2013-02-05T21:31:23.253 に答える
2

:beforeまた、:after疑似クラスは他の疑似クラス属性を持つことはできません。

于 2013-02-05T21:29:08.430 に答える
1

どうやら、そのような疑似要素を組み合わせることはできません。:beforeただし、 CSSで行うのではなく、jQueryを使用して""要素をDOMに挿入することができます。

$(function() {
    $('div.interesting').before('<div class="interesting-before"></div>');
});

次に、CSSで、.interesting-beforeand.interesting-before:hoverの代わりに.interesting:beforeandを参照します.interesting:before:hover。

例については、 http：//jsfiddle.net/Z97uN/2/を参照してください。

于 2013-02-05T22:51:32.757 に答える
0

正しい構文は次のとおりです。

div:hover:before
{
//css here
}

jsfiddle

于 2016-07-10T18:00:23.917 に答える
0

いくつかの解決策があります：

最も簡単 - 特定のクラスを div:before に割り当てます

//HTML
<div class="specificClass">A</div>
<div>B</div>
<style>
.specificClass:hover {color: red}
</style>

しかし、あなたの質問から、それはできないようです。次に、jQuery を活用します。

アプローチ #1

//JAVASCRIPT
$("div").prev().addClass("specificClass");

//in your CSS 
.specificClass:hover {color:red}

アプローチ #2

//JAVASCRIPT
$("div").delegate($("div").prev(),"mouseenter mouseleave",function(){
    $(this).toggleClass("specificClass");
}

//in your CSS 
.specificClass {color:red}

これは、div が 2 つしかない場合にのみ機能することを理解しておく必要があります。それ以上ある場合は、最後を除くすべてが「.specificClass」を受け取ります。とにかく、「span:hover:before」が機能した場合も同じことが起こります。

何を達成したいのか、なぜ達成したいのかを説明していただければ、より良い解決策を提供できます。

于 2013-02-05T22:05:17.543 に答える