如何让鼠标移上去显示图片或微信二维码

发布网友发布时间：2022-04-24 20:41

共3个回答

懂视网时间：2022-04-21 21:47

下面附上代码和效果图，应该是要用到CSS3。

扫描了解详情

回复讨论(解决方案)

css3
你知道还不去搜搜

如果你是用在手机上的话，你的交互设计是有问题的，手机上何来鼠标一说。
如果是在PC端，用jquery的animate方法就行，改变二维码的位置。

 $(document).ready(function()		 {		 $(".one").hover(function(){		 $(".erweima").animate({top:"100px"});		 });});

这是鼠标放上去，离开后怎么做呢？

$(".one").hover(function(e){ e.type == "mouseleave", //是否是离开事件}

也可以用

$(".one").mouseenter{}$(".one").mouseleave{}

$(".one").hover(function(e){ e.type == "mouseleave", //是否是离开事件}

也可以用

$(".one").mouseenter{}$(".one").mouseleave{}

再请教个问题，图片有超出的部分，overflow属性不好弄。怎么解决

overflow肯定是最好，最简单的解决方式。不好用的话，你注意两点①overflow要声明在父级元素的样式上；②注意下父级元素的大小。
好好理一下你的dom结构吧。
有是有其他方法，但会麻烦很多。

谢谢你，问题已解决

热心网友时间：2022-04-21 18:55

1、首先打开Axure，拖入一个二维码的图片，设置为隐藏状态。然后拖入一个矩形，调整一下形状，这里填写鼠标悬浮显示二维码。

2、设置矩形的用例，选择鼠标移入的事件。

3、然后在事件中设置矩形隐藏，二维码图片显示，置于顶层。

4、然后设置二维码的鼠标移出用例。

5、接着设置二维码图片隐藏，矩形显示，置于顶层。

6、完成之后，点击预览即可看到鼠标悬浮显示二维码，移出返回原样的效果。

热心网友时间：2022-04-21 20:13

<html>
<head>
<script type="text/javascript">
function showImg(){
document.getElementById("wxImg").style.display='block';
}
function hideImg(){
document.getElementById("wxImg").style.display='none';
}
</script>
</head>
<body>
<a href="javascript:void(0)" onMouseOut="hideImg()" onmouseover="showImg()">测试</a>
<div id="wxImg" style="display:none;height:50px;back-ground:#f00;position:absolute;">这里是微信图片</div>
</body>
</html>

这是一段让鼠标移到链接上显示图片或二维码的JS代码。