如何添加事件處理程序以跨度符號（阿拉伯語）？

我想逐字分割阿拉伯語單詞，將它們塗成不同的顏色，並在它們上添加事件處理程序。如何添加事件處理程序以跨度符號（阿拉伯語）？

我認識畫畫理念的一部分，以及處理輔音字母（哈爾夫蘇菲），但我還沒有找到辦法的事件處理程序添加到變音符號，女巫表示阿拉伯語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>

來源

2016-03-08 Rustam Apaev

問題不在於每本身的內容，但事實證明，含有變音的跨距零像素的寬度，因此不存在區域hover

您可以與您的測試玩情況下，通過增加一個通用的CSS添加邊框（），然後嘗試添加填充，使所有文字有一定的「區域」，懸停應該工作

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

來源

2016-03-08 11:31:41 Kuzeko

好的創意，大約有。但它不起作用。當我用變音符號（harakat）設置跨度寬度時，我們在字母（harf）之間有空隙，但是在變音符號周圍沒有空格。 –

使用'position：relative'然後用'left：-1em'和適當的'z-index'重新定位，你可以使用'display：inline-block'並設置高度，這樣它就不會覆蓋另一個字母。 Anway，'width'部分解決了懸停問題 – Kuzeko

如何添加事件處理程序以跨度符號（阿拉伯語）？

回答

相關問題