jquery可拖拽和droppable - 停止继承父母css

这很难解释，但我在我的页面上有可拖动和可拖拽的元素。一些droppable元素已经有可拖动的元素，但大多数都没有。jquery可拖拽和droppable - 停止继承父母css

当您将鼠标悬停在可拖放的图像上时，会出现背景图像，以便您知道悬停在图像上方。但是，当您将可拖动对象移动到另一可放置对象时，现在将鼠标悬停在新移动的可拖动对象上，会在用于包含它的旧对象拖放对象中显示背景图像。

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

基本上一切有一个“空”类，它显示了物品悬停时的背景图像。

来源

2013-02-18 Zaphod Beeblebrox

这可能是因为jQuery-UI缓存您的旧DOM对象。您可以在“更新”或“停止”（可拖动参数）上重新分配背景（css（））。 – 2013-02-18 19:21:13

请将您的代码发布到后代的问题中。 – Blazemonger 2013-02-18 19:21:57

@Allendar感谢您花时间回答。你能解释多一点你的意思，但我是新来的JavaScript。我知道你的意思是关于更新和停止参数（我使用droppable的drop事件来做别的事情），但我不确定我是如何重新分配背景的？ – 2013-02-18 19:24:17

的问题是，你拖动的元素是它是从哪里来的div一个孩子，所以当你的empty类分配给该元素，因为你拖动的元素是didv的孩子，你的CSS规则，.empty:hover发挥作用。

为了避免这个问题，把第二个div每个盒子里面，像这样：

添加一个新的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>

然后加入这对你的CSS：

.elementContainer { 
    position:relative; 
} 

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

最后，更换你的CSS规则.empty:hover与elementContainer:hover它应该工作！

如何以及为什么它的工作原理

引述w3schools，

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

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

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

希望这有助于！

来源

2013-02-19 06:46:16 Stephen

jquery可拖拽和droppable - 停止继承父母css

回答

相关问题