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

Answer 1

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:

1. Add the transition to the.shapes class like I showed above.

2. Remove the JavaScript code.

3. 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.

Answer 2

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

Answer 3

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:

• https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event
• https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseover

 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>

Answer 4

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.

Answer 5

here a complete smooth solution to you my friend

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



.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: 0.3s;


    }
    .changeshape {
        position: absolute;
        top: 22px;
        right: 10px;
    transition: 0.3s;

}