how to create hover effect with javascript

Question

I have three images I want to show some text on one particular image when my cursor goes on that image like on first image text should come from top, second image text should come from left and on third image text should come from right This hover effect already done in css but I have do it in Javascript so please help me with this problem.

Answer 1

 let p = document.querySelectorAll("p"); let div = document.querySelector("div"); div.addEventListener("mouseover", mouseOverHandler); div.addEventListener("mouseleave", mouseLeaveHandler); function mouseOverHandler(e) { //top p[0].style.top = 0; //left p[1].style.left = 0; //right p[2].style.right = 0; } function mouseLeaveHandler(e) { //top p[0].style.top = "-75px"; //left p[1].style.left = "-75px"; //right p[2].style.right = "-75px"; }

 * { margin: 0; padding: 0; } div { width: 200px; height: 200px; background-color: pink; position: relative; left: 300px; top: 100px; overflow: hidden; } p { width: 50px; height: 50px; text-align:center; line-height:50px; background-color: blue; position: absolute; transition: all 0.5s; } p:nth-child(1) { top: -50px; left: 75px; } p:nth-child(2) { top: 75px; left: -50px; } p:nth-child(3) { top: 75px; right: -50px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> </head> <body> <div> <p>top</p> <p>left</p> <p>right</p> </div> </body> </html>

How about this

how to create hover effect with javascript

Question

1 answers

solution1
-1 2022-04-07 11:04:12

how to create hover effect with javascript

Question

1 answers

solution1 -1 2022-04-07 11:04:12

solution1
-1 2022-04-07 11:04:12