Question

这很难解释，但我的页面上有可拖动和可放置的元素。一些可放置的元素已经在其中具有可拖动的元素，但大多数都没有。

当您将鼠标悬停在可放置的悬浮物上时，会出现一个背景图像，因此您知道您的悬停在它上面。但是，当您将一个可拖动的移动到另一个可拖放时，现在将鼠标悬停在新移动的可拖动上，背景图像将出现在用于包含它的OLD droppable中。

如果你看这里你可以看到我的问题： - 尝试移动其中一个黄色框，然后在移动它之后将鼠标悬停在它上面。背景图像出现在初始位置。 http://liquidlizard.net/

谁能告诉我如何解决这个问题？我很感激：）

编辑这里是我正在使用的一些代码

<div id="row-2col0" class="empty"><div class="position"><a href class="bookmark" target="_blank"></a></div></div>
<div id="row-2col1" class="empty"><div class="position"></div></div>
<div id="row-2col2" class="empty"><div class="position"></div></div>

JS：

$('.draggable').draggable({start: function() {var initialposition = ???}});
$('.droppable').droppable({drop: handleDropEvent, accept:'.bookmark'});
function handleDropEvent( event, ui ) {

}

CSS：

.empty:hover{background-image:url(../img/tilehover.png);}

基本上所有东西都有一个“空”类，当项目悬停时会显示背景图像。

Answer 1

问题是你的拖动元素是它来自div的子元素，因此当你将empty类分配给该元素时，因为你的拖动元素是那个didv的子元素，你的CSS规则{{1开始发挥作用。

要避免此问题，请在每个框中放入第二个div，如下所示：

使用类.empty:hover在div中添加一个新的div。

所以这一行:(以及所有类似的）
```
empty
```
对此的更改:(我将其分解以便于阅读。）
```
<div id="row-2col3" class="empty"><div class="position"></div></div>
```

然后将其添加到您的CSS：

<div id="row-2col3" class="empty">
    <div class = "elementContainer">      <!-- This is added..-->
        <div class = "wordHolder"></div>  <!-- ...............-->
    </div>                                <!--................-->
    <div class="position"></div>
</div>

最后，将您的CSS规则.elementContainer { position:relative; } .wordHolder { position:absolute; width:65px; height:65px; }替换为.empty:hover，它应该有效！

工作原理及方法

引用w3schools，

绝对位置元素相对于具有静态位置的第一个父元素定位。如果未找到此类元素，则包含块为elementContainer:hover：

因此，将<html>与相对属性集一起使用，可以作为我们使用类.elementContainer的绝对定位元素的容器。而且它们不会妨碍它们，因为它们被从常规流中移除而所有其他元素就像它不存在一样。

您可以在此处详细了解定位元素：http://www.w3schools.com/css/css_positioning.asp

希望这有帮助！

jquery draggable和droppable - 停止继承父css

1 个答案: