[英]CSS pointer-events in pseudo element not working in Firefox
I've got a horizontal menu with mid-dots (inserted via ::after
pseudo element) separating the menu items. 我有一个水平菜单,中间点(插入via ::after
伪元素)分隔菜单项。 I would like to disable linking on the mid-dots. 我想禁用中点上的链接。
In Safari this works as expected, but on Firefox (v.47), the pointer-events: none
is ignored. 在Safari中,这可以按预期工作,但在Firefox(v.47)上, pointer-events: none
被忽略。
Does someone know a workaround? 有人知道解决方法吗?
My code (and a Fiddle, too: https://jsfiddle.net/54gmfxax/ ): 我的代码(也是一个小提琴: https : //jsfiddle.net/54gmfxax/ ):
a { text-decoration: none; } ul li { list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; } ul li a::after { padding: 0em 1em; content: '\\00b7'; pointer-events: none; } ul li.last a::after { content: none; }
<ul class="menu"> <li class="first"><a href="#1" title="">Item 1</a> </li> <li class="leaf"><a href="#2" title="">Item 2</a> </li> <li class="leaf"><a href="#3" title="">Item 3</a> </li> <li class="last leaf"><a href="#4" title="">Item 4</a> </li> </ul>
Instead of putting the ::after
pseudo-elements on the anchor elements: 而不是将::after
伪元素放在锚元素上:
ul li a::after {
padding: 0em 1em;
content: '\00b7';
pointer-events: none;
}
ul li.last a::after {
content: none;
}
... put them on the list items: ...把它们放在列表项上:
ul li::after {
padding: 0em 1em;
content: '\00b7';
/* pointer-events: none; (not necessary) */
}
ul li.last::after {
content: none;
}
a { text-decoration: none; } ul li { list-style-image: none; list-style-type: none; margin-left: 0; white-space: nowrap; display: inline; float: left; } ul li::after { padding: 0em 1em; content: '\\00b7'; pointer-events: none; } ul li.last::after { content: none; }
<ul class="menu"> <li class="first"><a href="#1" title="">Item 1</a> </li> <li class="leaf"><a href="#2" title="">Item 2</a> </li> <li class="leaf"><a href="#3" title="">Item 3</a> </li> <li class="last leaf"><a href="#4" title="">Item 4</a> </li> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.