4

我即将用 HTML、Javascript 和 css 编写我自己的交互式教程。现在我有了创建一个 DIV 元素的想法，它代表一个发光的矩形来标记特定区域。问题是当我更改发光矩形的位置以突出显示可点击的元素时，发光矩形与可点击元素重叠。所以可点击元素不再是可点击的。有没有办法“禁用”发光矩形，使其可见但不再阻挡底层元素？

这是我的代码：

<div id="hauptteil">
    <div id="block" onclick="step2();" style="cursor: pointer">

    </div>

    <div id="glowDiv">
         <div id="glow" class="glow"><img src="images/transBlock.png"/></div>
    </div>                
</div>

这是css代码：

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
}

.glow {
   margin: auto;
   width: 147px;
   height: 90px;

   -webkit-border-radius: 15px;
   -moz-border-radius: 15px;  
   border-radius: 15px;

   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}

#block {
   width: 50px;
   height: 50px;
   background: red;
}

可视化我的问题。在我的页面上，我有一个显示为红色块的 DIV 元素。当我开始我的教程时，我改变了我的发光 DIV 的位置以覆盖红色块。所以看起来红色块正在发光。

4

4 回答 4

5

早在 2013 年，您必须使用脚本来解决此问题，但如今pointer-events已得到广泛支持。用它！

通常你只会使用pointer-eventscss 属性。你猜怎么着？IE 不支持它...在我们朋友 jquery 的帮助下，我们可以模拟它！

我的方法是在发光（绝对定位的 div）中捕获单击事件，并检查是否有任何其他元素与鼠标单击的 xy 坐标重叠。

警告：jQuery 领先！

首先只捕获点击事件：

$('.glow').on('click', function(e) {  // our trick here });

然后确定鼠标光标的坐标。很容易，因为 jQuery 通过在事件对象中给出坐标来帮助我们

var cursorX = e.pageX;
var cursorY = e.pageY;

现在我们需要遍历所有可能位于我们想要接收点击事件的发光 div 下方的 dom 元素。

$('.class-possibly-below').each(function(index, element) { // our calculations here });

如果我们可以获得相对于窗口的位置以及它的宽度和高度，我们就可以计算出点击时光标是否在窗口上方。在这种情况下，我们的 cursorX 和 cursorY 值将位于我们正在遍历的 DOM 元素的left-position和（分别是顶部和高度）之间。left-position + widthjQuery 再次提供了一些帮助：

var offset = $(element).offset();
xRangeMin = offset.left;
xRangeMax = offset.left + $(element).outerWidth();

我们使用offset()而不是position()因为后者返回相对于它的 parent的位置。我们分别使用outerWidth()andouterHeight()代替width()and ，height()因为前者还包括填充和边框。

现在检查 x 和 y 坐标是否在 range-min 和 range-max 之间。如果是这样，则触发此元素上的单击事件。

if(cursorX >= xRangeMin && cursorX <= xRangeMax && ...) {
    $(element).trigger('click');
}

你想要一些动作吗？看看这个小提琴！

于 2013-08-30T13:37:38.160 回答
1

正如我在评论中提到的，另一种方法是将发光类添加到活动 div：

<div id="hauptteil">
   <div id="block" onclick="step2();" class="glow">
</div>              


#block {
   width: 50px;
   height: 50px;
   background: red;
}
.glow {
   cursor:pointer;
   -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   -moz-box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
   box-shadow: 0px 0px 15px 5px rgba(255, 255, 190, .75);
}
于 2013-08-30T13:04:42.440 回答
0

您可以使用pointer-events: none;来忽略元素的可能单击事件。但是，正如评论中所述，您正在做的方法似乎并不是最好的选择。

#glowDiv {
width: 200px;
height: 100px;
position: absolute;
top: 200px;
left: 200px;
pointer-events: none;
}

pointer-events 属性允许控制 HTML 元素如何响应鼠标/触摸事件——包括 CSS 悬停/活动状态、Javascript 中的单击/点击事件以及光标是否可见。

将它放在您的覆盖元素上将使点击事件透明。

但是这在 IE 中不起作用

这是我的建议，我很好奇其他人是否有其他选择。我在我的网站上使用相同的东西，只是使用条件标签忽略了 IE 上的覆盖。

于 2013-08-30T12:56:51.080 回答
0

这是一个简单的别针，您可以查看它http://codepen.io/ElmahdiMahmoud/pen/Ewlto希望对您有所帮助！

于 2013-08-30T13:20:16.303 回答