addEventListener click works but not mouseover

Question

I know I am doing something stupid but for the life of me, I can't see what it is.

I have a div of letters for my first name sitting in a container. The idea is to 'mouseover' the letter and change the size of the character, though mouseover is not working. If I change the event to 'click' then it does work.

Why would 'mouseover' not be working but 'click' is?

Am I using the wrong event for hovering the mouse over the element?

document.getElementById('profile_name').addEventListener('mouseover', function(e) {
  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>

@Spectric if I use click as the event the text is reduced. If I use mouseover as the event then nothing happens — JessicaRyan, Jul 09 '21 at 15:50
@wittgenstein yes, when a user scrolls over a character I want to change the size of that character — JessicaRyan, Jul 09 '21 at 15:50

score 2 · Accepted Answer · answered Jul 09 '21 at 15:55

You could attach an event to every .letter.

But a better way is use the bubbling of events and check the target has the class letter.

This technique is known as event delegation,. Another advantage is that if later you add more letters, you don't need to add any more events.

eg..

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>

score 0 · Answer 2 · answered Jul 09 '21 at 15:55

You're attaching the mouseover event to the element with the id profile_name which contains all the characters. You're using the target attribute of the element which will be the element the event was attached to. Which in this case, is the containing element. So the text size for the containing element is the style that is changing, not the element the character is within.

The below should work

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]);
}

score -1 · Answer 3 · answered Jul 09 '21 at 15:55

I was trying to test this while the developer console was open and that prevented the mouseover event from being read.

I also adjusted my js so that it targets the individual letter using event delegation:


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

It is working now.

score -2 · Answer 4 · answered Jul 09 '21 at 15:54

try this.

   
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>

addEventListener click works but not mouseover

4 Answers4