html - 如何添加事件处理程序以跨越变音符号(阿拉伯语)？

Question

我想一个字母一个字母地拆分阿拉伯语单词，将它们涂成不同的颜色并在其上添加事件处理程序。

Image, how it looks like

我实现了关于绘画的部分想法，并处理了辅音字母 (harf)，但我还没有找到将事件处理程序添加到变音符号的方法，witch 表示阿拉伯语中的 wovels (harakat)。

句柄“:hover”在“#harf”元素上触发，但不会在“#harakat”元素上触发。

然后我也想使用“onclick”和其他事件。但我想，他们不会在其中带有变音符号的跨度上工作。

有解决办法吗？

<div class="arabic-text">
<span id=harf-1>ف&zwj;</span><span id=harakat-1>َ</span><span id=harf-2>&zwj;ع&zwj;</span><span id=harakat-2>َ</span><span id=harf-3>&zwj;ل</span><span id=harakat-3>َ</span>
<span id=harf-1>ف&zwj;</span><span id=harakat-1>َ</span><span id=harf-2>&zwj;ع&zwj;</span><span id=harakat-2>ِ</span><span id=harf-3>&zwj;ل</span><span id=harakat-3>َ</span>
<span id=harf-1>ف&zwj;</span><span id=harakat-1>َ</span><span id=harf-2>&zwj;ع&zwj;</span><span id=harakat-2>ُ</span><span id=harf-3>&zwj;ل</span><span id=harakat-3>َ</span>

</div>

<style>

#harf-1 {color:darkred }
#harf-2 {color:darkblue }
#harf-3 {color: darkgreen}

#harf-1:hover {color:red }
#harf-2:hover {color:red }
#harf-3:hover {color:red }

#harakat-3 {color:darkred }
#harakat-2 {color:darkblue }
#harakat-1 {color: darkgreen}

#harakat-3:hover {color:red }
#harakat-2:hover {color:red }
#harakat-1:hover {color: red}

.arabic-text {
font-family: Lateef; 
font-size: 300%;
}

</style>

Answer 1

问题不在于内容本身，而在于包含变音符的跨度的宽度为零像素，因此没有区域可以悬停

您可以通过添加添加边框的通用 css ( see at the link ) 来使用您的测试用例，然后尝试添加填充，以便所有字符都有一些“区域”，悬停应该可以工作

span{
  position:relative;
  border:1px solid #333;
  /*padding-left:10px;*/
}