I've got a horizontal menu with mid-dots (inserted via ::after
pseudo element) separating the menu items. I would like to disable linking on the mid-dots.
我有一个水平菜单,中间点(插入via :: after伪元素)分隔菜单项。我想禁用中点上的链接。
In Safari this works as expected, but on Firefox (v.47), the pointer-events: none
is ignored.
在Safari中,这可以按预期工作,但在Firefox(v.47)上,指针事件: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>
1 个解决方案
#1
1
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>
#1
1
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>