如何显示通过同时使用指针事件和光标属性禁用了图像链接？

debugcn 发表于 Dev

因为

小提琴

我有一个包裹在锚上的图像，该锚上有单击动作（上面的小提琴中有一个简单的例子）。

在某些时候，此操作无效，因此我想做三件事：

使图像变灰（-webkit-filter：invert（40％）;）
禁用点击事件（指针事件：无；）
更改光标（光标：不允许；）

使图像变灰总是可以的，但是似乎指针事件和光标属性不能很好地配合使用。

当同时应用指针事件和光标属性时，我希望禁用该操作并且更改光标-但似乎指针事件属性会覆盖我设置光标的能力。

正确的方法是什么？

代码：

No styles  <br>
<a href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none (good - I cannot click) <br>
<a class="grey no-click-1" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
cursor: not-allowed (good - I can click, but the cursor has changed) <br>
<a class="grey no-click-2" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
<hr>
pointer-events: none AND cursor: not-allowed (bad - I can't click but the cursor has NOT changed)<br>
<a class="grey no-click-3" href="javascript:alert('clicked')"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>


img {
    height: 80px;
}

.grey {
    -webkit-filter: invert(40%);    
}

.no-click-1 {
    pointer-events: none;
}

.no-click-2 {
    cursor: not-allowed;
}

.no-click-3 {
    pointer-events: none;
    cursor: not-allowed;
}

贝西

编辑：设置包装div显示为：inline-block;

http://jsfiddle.net/o8bjr3eL/4/

总结你的元素在div与cursor: not-allowed;和孩子a有pointer-events: none;

的HTML：

<div class="not-allowed">
        <a class="no-click" href="#"><img src="https://www.google.com/images/srpr/logo11w.png"/></a>
</div>

编辑： CSS：

.not-allowed{
    cursor: not-allowed;

    display: inline-block; /* This is working */

}
.no-click {
    pointer-events: none;
    -webkit-filter: invert(40%);
}

那对我有用

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。