Как добавить обработчик событий в диалоговом режиме (арабский)?

Question

Я хочу разделить арабские слова буквами, нарисуйте их на разные цвета и добавьте обработчик событий на них.

Image, how it looks like

я понял, часть идеи о живописи, и ручка на согласные буквы (HArF), но я не нашел способ добавить обработчик событий для диакритических символов, ведьма указывает wovels (харакат) в арабский язык.

Ручка ": 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, которые добавляют границ(), то попробуйте добавить отступы, так что все символы имеют некоторую «область», парение должно работать

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