Question

我想要实现的目标：将鼠标悬停在unicode角色上应该切换另一个span元素的可见性。适用于Chrome但不适用于Firefox。

我有以下HTML：

<span class="default" id="some_id">
    <b id="another_id">&#8416;</b>
</span>
<span id="even_another_id" style="margin-left: 10px; display:none;">
    Some text.
</span>

当我尝试在Chrome（版本37）中使用以下JS（使用jQuery）时，它可以正常工作，但在Firefox（版本31）中却没有：

$("#some_id").hover(function () {
    $('#even_another_id').toggle();
});

这是一个jsFiddle来解决这个问题。

我已经尝试过使用事件的其他（内部）ID，并尝试使用mouseover事件，mouseenter / mouseleave事件。没有任何效果。即使是简单的点击事件也不起作用。

这是Firefox中的错误还是我做错了什么？

编辑：

我甚至尝试过使用CSS属性：现在悬停。结果相同。 Chrome可以正常使用，但Firefox却没有。

正确答案后编辑：这里是更新的Fiddle，也可以在Firefox中使用！

块引用

Answer 1

U + 20E0组合Enclosing Circle反斜杠作为组合字符，意味着超越前一个字符的顶部。因此它没有自己的宽度，因此包含它的<span>也没有宽度。所以没有区域让你鼠标悬停。虽然不同的浏览器具有不同的字体首选项，但它可能会选择不同的渲染。

它不是特定于Firefox的。

您可以通过在其前面放置一个不间断的空格来为它预留一些空间，例如：

<span ...>&#x00A0;&#x20E0;</span>

但是，在网络上使用U + 20E0很糟糕，因为字体支持很差。（我得到一个字形不知名的盒子，因为我的浏览器上没有字体支持它。至少盒子占用空间所以是可以忍受的！）你可能尝试的更常见的视觉类似的替代品是∅（U + 2205空集符号）或Ø U + 00D8拉丁大写字母与笔画。否则一定要使用图像。

在Firefox中与Unicode字符交互无法正常工作

1 个答案: