当前位置:首页 » 网页前端 » 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>