:hover
呼び出す状態を持つ要素があり$.draggable()
ます。ヘルパーはクローンなので、要素をドラッグするとクローンが作成され、代わりにドラッグされます。ただし、ドラッグ可能な要素の:hover
状態がオフになっていない場合があり、要素が元の状態に戻る前に、ドラッグせずに 2 回目のマウスオーバー/アウトを実行する必要があります。それはすべてかなり標準的なものです。$.draggable()
呼び出しは次のとおりです。
$("#" + slot).draggable({
helper: "clone",
appendTo: "body",
scope: "my_scope",
start: function (event, ui) {
// do some stuff when the element starts being dragged
},
stop: function () {
// do some stuff when the element stops being dragged
}
});
そして、要素が持つすべての CSS スタイルは次のとおりです。
.inventory_item {
width: 50px;
height: 50px;
background-color: #222;
font-family: Courier;
text-align: center;
margin: 10px;
line-height: 50px;
font-size: x-large;
opacity: 1;
cursor: pointer;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px #111;
-moz-box-shadow: inset 0 0 5px #111;
box-shadow: inset 0 0 5px #111;
}
そしてその:hover
状態:
.inventory_item:hover {
-webkit-box-shadow: inset 0 0 10px #555;
-moz-box-shadow: inset 0 0 10px #555;
box-shadow: inset 0 0 10px #555;
}
現在、私の知る限り、:hover
Javascript で要素の状態を変更する方法はありません。私のもう 1 つの選択肢は、クラスと JavaScript のマウスオーバー/アウト イベントを使用して、制御可能な:hover
状態をシミュレートすることです。しかし、それを行う前に、これに対する既知の修正はありますか? これは一般的な jQuery UI のバグですか? 私の検索では何も見つかりませんでした。
問題のスクリーンショットは次のとおりです。
スクリーンショット ソフトウェアのせいでそこにマウス カーソルが表示されませんが、ドラッグ アウトされている要素の上にあります。強調表示されているドラッグ可能な要素上ではありませんが、要素の:hover
状態はオンです。クールではありません。