如何使用 javascript 创建 hover 效果

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.我有三张图片，当我的 cursor 在该图片上播放时，我想在一张特定图片上显示一些文字，就像第一张图片上的文字应该来自顶部，第二张图片上的文字应该来自左侧，第三张图片上的文字应该来自右侧这个 hover 效果已经在 css 完成，但我已经在 Javascript 完成，所以请帮我解决这个问题。

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这个怎么样

如何使用 javascript 创建 hover 效果

问题描述

1 个解决方案

解决方案1
-1 2022-04-07 11:04:12

如何使用 javascript 创建 hover 效果

问题描述

1 个解决方案

解决方案1 -1 2022-04-07 11:04:12

解决方案1
-1 2022-04-07 11:04:12