0

ユーザーが移動できるdivにいくつかの要素があります。ドラッグ可能であることを明確にするために、hover疑似クラスを使用しています。

ので、私は持っています

.textbox
{ /*some style*/
}

そして、テキストボックスのドラッグ可能なコーナー用のホバー疑似クラスがあります。

.textbox:hover .ui-resizable-sw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-se {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-nw {background: rgba(0, 0, 0, 0.5)  !important;}
.textbox:hover .ui-resizable-ne {background: rgba(0, 0, 0, 0.5)  !important;}

ただし、ここで行う必要があるのは、ユーザーが特定のアクティブ化ボタン ( ) をクリックした後にのみ CSS を適用できるようにすることswitchOnです。上記の行を CSS スタイルシートに残しておくと、スタイルは常に適用されますが、時々適用し、他の場合には適用しないようにしたいと考えています。

私はこれを確認し、その方法を知っています : :hover 疑似クラスでこれを行うことはできますか?

問題は、jQuery が遅くなる可能性があり、ユーザーの にかなりの数の要素がある可能性があるため、このように jquery を使用して実行する必要がないことdivです。jquery を介してスタイルを動的に変更する代わりに、css スタイルをオブジェクトにアタッチまたはデタッチする方法はありますか?

このようなもの:

function switchOn()
{
     $('.textbox').addStyle('.textbox:hover .ui-resizable-ne, 'background: rgba(0, 0, 0, 0.5)  !important;');

}
4

1 に答える 1