Question

我有这个问题，我无法解决，我正在尝试将放大/缩小光标添加到网站上的某些div .l图像有一个很好的放大光标，点击后，加载一个新的.esc div（作为灯箱）

.l{
cursor: -webkit-zoom-in; cursor: -moz-zoom-in;
}
.esc {
 cursor: -webkit-zoom-out; cursor: -moz-zoom-out;
}

#media{
 cursor:default;
}

假设#media div包含在.esc div中。 #media div有一些区域，其中几乎没有任何东西，并且在那些区域中鼠标光标不是：default，但是-webkit-zoom-out。

我还没有找到一种方法来覆盖这个问题，任何想法？

-------------------------
|.esc                   |
|    ----------------   |
|   |  #media       |   |
|   | -----  ---    |   |
|   | |   | |   |   |   |
|   | |   | |   |   |   |
|   | |   | -----   |   |
|   | |   |    *    |   |
|   | |   |         |   |
|   | -----         |   |
|    ----------------   |
-------------------------

*这里它应该是cursor：default;但它是-moz-zoom-out

这是一个jsfiddle：http://jsfiddle.net/mmbFu/

Answer 1

好的，请查看，查看代码并查找以下行：

               <a href="/random.php?media=media" style="color:#91BD09">RANDOM</a>
            </div>
         </div>
      </div>

它非常靠近底部，那最后一个div？这是#media的结束标记。现在这样做：

               <a href="/random.php?media=media" style="color:#91BD09">RANDOM</a>
            </div>
         </div>
      </div>
<div style="clear:both"></div>

插入该div，它将始终根据页面的正常流程清除其他元素。希望它适合你。

Answer 2

或许#media小于其内容（给它一个可见的背景来验证）。如果内容是float:left或float:right

，则会发生这种情况

有几种方法可以使容器扩展到其内容：

在#media的末尾添加一个不可见的元素，并将其float:none; clear:both。
将容器设置为overflow而不是visible（hidden或auto）。

Answer 3

您是否检查过您的div＃media与内部的两个块具有相同的高度/宽度？因此div覆盖了整个区域，可能需要添加float：left以使其继承子对象的大小。

@George说，使用jsfiddle更容易修复。

div从底层div继承游标样式

3 个答案: