如何使用 javascript 创建 hover 效果

Question

我有三张图片，当我的 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>

这个怎么样

如何使用 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