您可以将事件附加到每个 .letter .
但更好的方法是使用事件冒泡并检查目标是否具有类 letter .
这种技术称为事件委派，。另一个优点是，如果以后添加更多字母，则不需要再添加任何事件。
如。。

document.getElementById('profile_name').addEventListener('mouseover', function(e) {
  if (e.target.classList.contains('letter'))
    e.target.style.fontSize = '10px';
}, false);

<div class="profile_name_container">
  <div id="profile_name">
    <span class="letter">J</span>
    <span class="letter">e</span>
    <span class="letter">s</span>
    <span class="letter">s</span>
    <span class="letter">i</span>
    <span class="letter">c</span>
    <span class="letter">a</span>
    <span class="letter">.</span>
    <span class="letter">R</span>
    <span class="letter">y</span>
    <span class="letter">a</span>
    <span class="letter">n</span>
  </div>
</div>

您正在连接 mouseover 事件发送到id为的元素 profile_name 其中包含所有字符。你用的是 target 元素的属性，该元素将是事件附加到的元素。在本例中，它是包含元素。因此，包含元素的文本大小是正在更改的样式，而不是字符所在的元素。
下面的方法应该有效

var a = document.getElementById('profile_name').getElementsByClassName('letter');

for (var i = 0; i < a.length; i++) {

    (function(elem) {
        elem.addEventListener('mouseover', function(e) {
            e.target.style.fontSize = '10px';
        })
    })(a[i]);
}

我试图在开发人员控制台打开时进行测试，这会阻止mouseover事件被读取。
我还调整了我的js，使其使用事件委托针对单个信函：

document.getElementById('profile_name').addEventListener('mouseover', function(e) {
       if (e.target.className === 'letter') {
           e.target.style.fontSize = '10px';
       }

    }, false);

它现在正在工作。

试试这个。

var item = document.getElementById("profile_name");
item.addEventListener("mouseover", func, false);
item.addEventListener("mouseout", func1, false);

function func(e)
{  
   e.target.style.fontSize = '10px';
   e.target.style.color = 'red';

}

function func1(e)
{  
   e.target.style.fontSize = '16px';
   e.target.style.color = '#000';
}

<div class="profile_name_container">
     <div id="profile_name">
          <span class="letter">J</span>
          <span class="letter">e</span>
          <span class="letter">s</span>
          <span class="letter">s</span>
          <span class="letter">i</span>
          <span class="letter">c</span>
          <span class="letter">a</span>
          <span class="letter">.</span>
          <span class="letter">R</span>
          <span class="letter">y</span>
          <span class="letter">a</span>
          <span class="letter">n</span>
     </div>
</div>