代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<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>
<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
和鼠标移开事件
onmouseup="hoverShowDiv()" />
最后就是触发的方法hoverShowDiv()与hoverHiddendiv()在js中定义
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/）的文字栏，即可有下拉菜单弹出，移开鼠标，即可隐藏，这就是鼠标悬停。
鼠标悬停特效代码怎么写,鼠标放在小图片上旁边显示一张大图片?
代码有bug，修改后如下：需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg 效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!<!docty...
图片中鼠标悬停特效代码怎么写?
图片中鼠标悬停特效代码：。鼠标悬停的意思是指，当你的鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容弹出，档从这个图标、文字或者图片上移开鼠标后，弹出的内容自动缩回。举例：鼠标悬停在百度首页（http:\/\/zhidao.baidu.com\/）的文字栏，即可有下拉菜单弹出，移开鼠标，即可隐藏，这...
网页上鼠标移到图片上图片就放大的效果 要如何实现
用js，先是一个小图片（缩略图），onMouseOver时触发js写的Function，当然Function中是处理方法。这只是简单思路，至于怎么写网上有很多类似的代码可以供你copy了，自己找找。
寒风大雪跪碎玻璃求鼠标放在图片链接上 图片有位移的代码 要独立不影响...
③<IMG style="FILTER: Alpha(opacity=100,style=3)" src="图片链接地址" width=200> ④<IMG style="FILTER: Alpha(opacity=0,finishopacity=100,style=1)" src="图片链接地址" width=200> 3、其他特效 ①浮雕 <IMG style="FILTER:progid:DXImageTransform.Microsoft.Emboss()" src="图片链接...
如何在网页上实现鼠标悬停使图片放大功能,好像java的class可以,不知道怎...
最后，当鼠标在图片上移动时，应该使用mousemove()方法将图片预览也进行移动。("a.preview").mousemove(function(e){ ("#preview").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px");});jQuery实现图片预览的完整代码 this.imagePreview = function(){...
鼠标放在小图标上显示新的大图效果怎么弄?
function show(obj){ var img = document.getElementById("showimg");if(img.src!=obj.src){ img.src=obj.src;} img.style.display="";img.style.position="absolute";img.style.top = obj.offsetTop;img.style.left = obj.offsetLeft+obj.width;} function hide(){ document.getElementById...
html 请教 我想做一个图片特效。 鼠标移到图片上,图片切换另一张...
先插入一个表格，将鼠标定位在表格内，从上面的菜单栏中选择图像→_→鼠标经过点，然后就会出现一个对话框就能选择原图像及鼠标经过点图像，这样就好了，记得给分哦
用Dreamweaver 怎么使鼠标指针移动到图片上方时,图片自动放大?
扩展名改成html,打开,鼠标移动到图片上后,图片自动变为原来的两倍大,移开后,又恢复大小.解释:onmouseover 表示事件：鼠标在对象上，onmouseout:鼠标没有在对象上 对象是后面的this,表示就这个对象,即前面的 img src="1.gif"style:设置css属性,这个是修改后面的zoom,表示对对象进行缩放,
鼠标特效
图片跟随着鼠标:<SCRIPT LANGUAGE="JavaScript">var image="..\/images\/helpor.gif"var newtop=15var newleft=15if (navigator.appName == "Netscape") {layerStyleRef="layer.";layerRef="document.layers";styleSwitch="";}else{layerStyleRef="layer.style.";layerRef="document.all";styleSwitch=".style...
鼠标经过图片放大怎么设置鼠标经过图片放大怎么设置的
dw设置鼠标划过图片变大的方法步骤 【第一步】打开Dreamweavercc2014软件，选择建立html界面，里面自动生成一些必要代码的代码格式，节省时间。【第二步】在body标签内输入：pclass=oneid=one>\/p>；这是图形框的代码。3.【第三步】在body标签前面位置，输入代码。.one{width:100px;height:100px;back...
