这很难解释,但我的页面上有可拖动和可放置的元素。一些可放置的元素已经在其中具有可拖动的元素,但大多数都没有。
当您将鼠标悬停在可放置的悬浮物上时,会出现一个背景图像,因此您知道您的悬停在它上面。但是,当您将一个可拖动的移动到另一个可拖放时,现在将鼠标悬停在新移动的可拖动上,背景图像将出现在用于包含它的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);}
基本上所有东西都有一个“空”类,当项目悬停时会显示背景图像。
答案 0 :(得分:0)
问题是你的拖动元素是它来自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
希望这有帮助!