0

mouseoverのイベントでトリガーされる次のコードがありますDIV。

if(!$this.hasClass('ready')) 
{   if($this.hasClass('activated'))
    {
        $this.removeClass('activated');
    }
    $this.addClass('ready');
}

コードは他にもありますが、基本的には上記と同じ概念パターンに従います。クラスの存在を確認し、そのクラスが存在する場合にのみ、他のクラスを追加または削除します。これは で発生しmouseover、 で別のことが発生しmouseoutます。だから誰かが私がCSSと:hover. しかし、私は2つの異なるタイプを持っていDIVます.1つのタイプにはテキストが含まれているため、クラス「textBox」が含まれ、もう1つのタイプには画像が含まれているため、クラス「imgBox」があります。

私は次のようなことをしたい:

div.imgBox .ready:hover
{ /* some style */ }

div.textBox .ready:hover
{ /* some style */ }

そのため、 classがないときにマウスをdivs の上に置いても、何も起こらないはずです。これは可能ですか？ページでのユーザー操作を高速化するために CSS に切り替えようとしているだけです。. 私は正しいですか？.readydiv

編集

質問の重要な部分を追加するのを忘れていました-ネストされた要素はどうですか? つまり、divでサイズ変更可能になる がhoverあり、それが発生した場合、以前は透明だったサイズ変更ハンドルに色付きの背景を取得したいということです。

<div class='imgbox'>
<div class='ui-resizable-se'></div>
...
</div>

つまり、概念的には次のようなものです。

.imgbox:hover{ .ui-resizable-se { /*some style */ } }

これは可能ですか？

4

3 に答える 3

3

type クラスと ready クラスの両方が同じdivにある場合は、2 つのクラスの間のスペースを取り除く必要があります。

div.imgBox.ready:hover
{ /* some style */ }

div.textBox.ready:hover
{ /* some style */ }

ネストされた要素のスタイルを設定する必要がある場合は、パーツの後にスペースを入れて単純に追加します。:hover

div.imgBox.ready:hover .ui-resizable-se
{ /* some style */ }
于 2013-02-08T17:08:35.987 に答える
1

CSS でクラスを追加または削除することはできません。CSS プロパティに応じて、スタイルを追加または削除することしかできません。したがって、マウスオーバー時に一部の外観を変更したい場合はdiv、スタイルを明示的に指定する必要があります。

于 2013-02-08T17:09:01.993 に答える
0

ホバー定義で次のように指定する必要があります。

$('div.ready').hover() {
    // Your code goes here
}

そうすれば、ready クラスを持つ divだけがホバー イベントを持ちます。そうでなければ、何も起こりません

于 2013-02-08T17:45:14.963 に答える