1

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

当您将鼠标悬停在 droppables 上时，会出现一个背景图像，以便您知道您将鼠标悬停在它上面。但是，当您将一个可拖动对象移动到另一个可拖放对象时，现在将鼠标悬停在新移动的可拖动对象上时，一个背景图像会出现在曾经包含它的旧可拖放对象中。

如果您看这里，您会看到我的问题： - 尝试移动其中一个黄色框，然后在移动后将鼠标悬停在它上面。背景图像出现在初始位置。 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);}

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

4

1 回答 1

0


问题是您拖动的元素是它来自的 div 的子元素，因此当您将empty类分配给该元素时，因为您的拖动元素是该 didv 的子元素，您的 CSS 规则.empty:hover就会发挥作用。

为避免此问题，请在每个框内放置第二个 div，如下所示：

  1. 在 div 中添加一个新的 div 类empty。

    所以这一行：（以及所有喜欢它的人）

    <div id="row-2col3" class="empty"><div class="position"></div></div>

    对此的更改：（我将其分解以使其更易于阅读。）

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

  2. 然后将其添加到您的 CSS 中：

    .elementContainer {
    position:relative;
}

.wordHolder {
    position:absolute;
    width:65px;
    height:65px;
}

  3. 最后，将您的 CSS 规则替换.empty:hover为elementContainer:hover它应该可以工作！

它如何以及为什么起作用

引用w3schools的话，

绝对位置元素相对于第一个具有非静态位置的父元素定位。如果没有找到这样的元素，则包含块是<html>：

因此，使用.elementContainer相对属性集作为我们绝对定位元素的容器，使用 class wordHolder。而且它们不会妨碍它们，因为它们已从常规流程中移除，并且所有其他元素的行为就好像它不存在一样。

您可以在此处阅读有关定位元素的更多信息：http: //www.w3schools.com/css/css_positioning.asp

希望这可以帮助！

于 2013-02-19T06:46:16.643 回答