3个回答
展开全部
代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<!doctype html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
你要显示特效的html
<img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />
<div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" >
大图片显示如下
<img src="大图片.jpg" width="500px" height="300px" id="bigimg" />
</div>
<script type="text/javascript">
let divHover = document.getElementById("divHover");
function hoverShowDiv() {
console.log("显示大图片");
divHover.style.display = "block";
divHover.style.top = document.getElementById("littleimg").style.top + 10;
divHover.style.left = document.getElementById("littleimg").style.left + 10;
}
function hoverHiddendiv() {
console.log("显示小图片");
divHover.style.display = "none";
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
logo在线生成器
2024-10-28 广告
在上海数都信息科技有限公司，我们专注于前沿的数字视觉设计技术，为客户提供定制化的文字图标生成服务。利用先进的算法与创意美学融合，将文字转化为独特而富有表现力的图标，不仅保留了文字的信息精髓，更赋予了其视觉上的冲击力和辨识度。无论是品牌标识、...
点击进入详情页
本回答由logo在线生成器提供
展开全部
你要显示特效的html
<div style="width:200px;height:80px;border:1px solide #aaccff;" id="divHover" >
写出你要悬停后出现的效果
<img src="~/images/jalendar-wood-bg.png" width="100px" height="200px" id="bigimg" />
</div>
写好后进行隐藏 style="display:none;"
然后当你鼠标悬停在图片上的时候触发鼠标移动上去事件onmouseup
和鼠标移开事件
<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"
onmouseup="hoverShowDiv()" />
最后就是触发的方法hoverShowDiv()与hoverHiddendiv()在js中定义
<script type="text/javascript">
function hoverShowDiv() {
document.getElementById("divHover").style.display = block;
document.getElementById("divHover").style.top = document.getElementById("smallimg").style.top + 10;
document.getElementById("divHover").style.left = document.getElementById("smallimg").style.left + 10;
}
function hoverHiddendiv() {
document.getElementById("divHover").style.display = none;
}
</script>
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
图片中鼠标悬停特效代码：<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"onmouseup="hoverShowDiv()" />。
鼠标悬停的意思是指，当你的鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容弹出，档从这个图标、文字或者图片上移开鼠标后，弹出的内容自动缩回。
举例：
鼠标悬停在百度首页（http://zhidao.baidu.com/）的文字栏，即可有下拉菜单弹出，移开鼠标，即可隐藏，这就是鼠标悬停。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
