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