2

: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;
}

現在、私の知る限り、:hoverJavascript で要素の状態を変更する方法はありません。私のもう 1 つの選択肢は、クラスと JavaScript のマウスオーバー/アウト イベントを使用して、制御可能な:hover状態をシミュレートすることです。しかし、それを行う前に、これに対する既知の修正はありますか? これは一般的な jQuery UI のバグですか? 私の検索では何も見つかりませんでした。

問題のスクリーンショットは次のとおりです。

問題のイメージ

スクリーンショット ソフトウェアのせいでそこにマウス カーソルが表示されませんが、ドラッグ アウトされている要素の上にあります。強調表示されているドラッグ可能な要素上ではありませんが、要素の:hover状態はオンです。クールではありません。

4

0 に答える 0