how to make a smooth mouseover and mouseout with javascript

Question

From the code I observed the mouseover and mouseout doesn't work when you hover on other element inside each boxes. Here is a link to what I have done: https://jsfiddle.net/t9ax72wp/. can anyone assist me to resolve this problem since I am new to javascript. Thank you for your assistance in advance.

Here is the js code. click on the link to see the full code:

let boxes = document.getElementsByClassName("records");

for (let i = 0; i < boxes.length; i++) {
    boxes[i].addEventListener("mouseover", showFullShape);
    boxes[i].addEventListener("mouseout", normalShape);
}

function showFullShape(e) {
    elem = e.target.querySelector(".shapes");
    elem.classList.add("changeshape");
}

function normalShape(e) {
    elem = e.target.querySelector(".shapes");
    elem.classList.remove("changeshape");
}

looks like your codepen link in incomplete – barley Nov 16 '19 at 17:53 — barley, Nov 16 '19 at 17:53
i have added the correct link now – hero Nov 16 '19 at 18:00 — hero, Nov 16 '19 at 18:00

Attila Antal · Accepted Answer · 2019-11-16T18:30:13.677

To achieve a smooth transitioning, add transition to the .shapes CSS class:

.shapes {
    /* rest of the rules */
    transition: all .4s;
}

Also, replace the mouseover and mouseout events with "mouseenter" and "mouseleave".

boxes[i].addEventListener("mouseenter", showFullShape);
boxes[i].addEventListener("mouseleave", normalShape);

Result: https://jsfiddle.net/j5apdLht/

It is advised, however, that you do everything with CSS, to improve perfomance of the Website. If the usage of JavaScript is not a necessity, you can try the following:

Add the transition to the .shapes class like I showed above.
Remove the JavaScript code.
Use the :hover pseudo selector on the .records and style the .shapes like the following example:

.records:hover .shapes {
    position: absolute;
    top: 22px;
    right: 10px;
}

Result: https://jsfiddle.net/r93afqj4/1/

Update

Check out the What is the difference between the mouseover and mouseenter events? and mouseenter vs mouseover events to have a better understanding. Perhaps this will explain why I have suggested the change.

the transition you added made it more user friendly. Thank you Attila. — hero, Nov 16 '19 at 20:35

score 2 · Answer 2 · answered Nov 16 '19 at 18:17

I don't know if it is a requirement that you use javascript for this functionality but I tried achieving the same functionality without javascript. I just commented out your javascript file and modified your CSS file as follows:

.wrapper {
        float: left;
        width: 100%;
        overflow: hidden;
    }
    .records {
        border: 1px solid #ddd;
        width: 20%;
        float: left;
        margin-right: 3%;
        position: relative;
    }
    .shapes {
        height: 63px;
        width: 63px;
        background: grey;
        border-radius: 100%;
        text-align: center;
        padding-top: 10px;
        margin-top: 10px;
        position: absolute;
        top: 67px;
        right: 10px;
    transition: all 0.2s ease-in;
    }
    .records:hover .shapes {
        position: absolute;
        top: 22px;
        right: 10px;
    }

Thank you Daniel for the answer. – hero Nov 16 '19 at 20:33 — hero, Nov 16 '19 at 20:33

score 0 · Answer 3 · answered Nov 16 '19 at 18:27

The reason is the events you are using: mouseover and mouseout. When you set listeners for these events, they get fired when you mouse over or out that exact element. So, when you move mouse over to its children, that is not considered a mouseover on itself (thus your mouseout is being called and the shape goes back).

To solve your problem just use another pair of events: mouseenter and mouseleave. Check the demo below.

For more details check out:

let boxes = document.getElementsByClassName("records");
 for (let i = 0; i < boxes.length; i++) {
  boxes[i].addEventListener("mouseenter", showFullShape);
  boxes[i].addEventListener("mouseleave", normalShape);
 }
 function showFullShape(e) {
  elem = e.target.querySelector(".shapes");
  elem.classList.add("changeshape");
 }

 function normalShape(e) {
  elem = e.target.querySelector(".shapes");
  elem.classList.remove("changeshape");
 }

.wrapper {
  float: left;
  width: 100%;
  overflow: hidden;
 }
 .records {
  border: 1px solid #ddd;
  width: 20%;
  float: left;
  margin-right: 3%;
  position: relative;
 }
 .shapes {
  height: 63px;
  width: 63px;
  background: grey;
  border-radius: 100%;
  text-align: center;
  padding-top: 10px;
  margin-top: 10px;
  position: absolute;
  top: 67px;
  right: 10px;
 }
 .changeshape {
  position: absolute;
  top: 22px;
  right: 10px;
 }

<div class="wrapper">
  <div class="records">
   <h3>records title</h3>
   <p>record details</p>
   <button>click me</button>
   <div class="shapes">
    <p>1</p>
   </div>
  </div>
  <div class="records">
   <h3>records title</h3>
   <p>record details</p>
   <button>click me</button>
   <div class="shapes">
    <p>1</p>
   </div>
  </div>
  <div class="records">
   <h3>records title</h3>
   <p>record details</p>
   <button>click me</button>
   <div class="shapes">
    <p>1</p>
   </div>
  </div>
 </div>

score -1 · Answer 4 · answered Nov 16 '19 at 18:13

-1

Why don't you use css instead ?

.records:hover .shapes {
  position: absolute;
  top: 22px;
  right: 10px;
}

And you remove all Javascript in your file.

You should also remove your .changeshape class as well.

answered Nov 16 '19 at 18:13

junwen-k

3,454
1
15
28

how to make a smooth mouseover and mouseout with javascript

4 Answers4