當前位置:首頁 » 網頁前端 » web滑鼠懸停代碼
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

web滑鼠懸停代碼

發布時間: 2023-05-28 14:51:56

⑴ 滑鼠懸停特效代碼怎麼寫,滑鼠放在小圖片上旁邊顯示一張大圖片

代碼有bug,修改後如下:

需要注意,拷貝下面這段代碼,保存為 html後綴名的文件;需要自己在相液燃同的目錄下,放置兩張圖片,小圖片.jpg 大圖片.jpg

效果如下圖:當滑鼠懸停在小圖片上面的時候,會顯示大圖片;滑鼠移出,隱藏大圖片。

問題:定位需要讀者自己去實現一下吧,偷懶了。感謝樓上分享!

<!doctypehtml>
<html>
<head>
<metacharset=utf-8>
</head>
<body>
你要顯示特效的html
<imgsrc="小圖片.jpg"width="200px"height="200px"id="littleimg"onmouseout="hoverHiddendiv()"onmouseenter="hoverShowDiv()"/>
<divstyle="width:200px;height:80px;border:1pxsolide#aaccff;display:none;"id="divHover">
大圖片顯示如下
<imgsrc="大圖片.jpg"width="500px"height="300px"id="bigimg"/>
</div>
<scripttype="text/javascript">
letdivHover=document.getElementById("divHover");
functionhoverShowDiv(){
console.log("顯示大圖片");
divHover.style.display="block";
divHover.style.top=document.getElementById("littleimg").style.top+10;
divHover.style.left=document.getElementById("littleimg").style.left+10;
}
functionhoverHiddendiv(){
console.log("顯示小圖片");
鬧配虛divHover.style.display="none";
賣核}
</script>
</body>
</html>

⑵ 用JavaScript寫出當滑鼠懸停在按鈕上時WEB頁面從綠色變為紅色,當滑鼠移開時頁面從紅色變為藍色的代碼

<body bgcolor="#00ff00">
<input type="button" id="btn" value="按鈕" onmouseover="over();" onmouseout="out();" />
</body>
<script>
function over(){
document.bgColor = "#ff0000";
}
function out(){
document.bgColor = "#0000ff";
}
</script>