如何添加事件处理程序以跨越变音符号（阿拉伯语）？

Question

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

我实现了关于绘画的部分想法，并处理了辅音字母 (harf)，但我没有找到向变音符号添加事件处理程序的方法，表示阿拉伯语中的 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

问题不在于内容本身，而在于包含变音符的跨度的宽度为零像素，因此 hover

没有区域

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

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

如何添加事件处理程序以跨越变音符号（阿拉伯语）？

How to add event handler to span with diacritical symbol (arabic)?

html

css

arabic

diacritics

hover