求教，有这么一个效果，当把鼠标放上去二维码慢慢的出来，鼠标离开二维码慢慢的下去，怎么去实现。_html/css

求教，有这么一个效果，当把鼠标放上去二维码慢慢的出来，鼠标离开二维码慢慢的下去，怎么去实现。_html/css_WEB-ITnose

WBOY

发布： 2016-06-21 08:58:56

原创

1254 人浏览过

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

<div class="Apply" ><div class="one" onmouseover="MM_over(this)" onmouseout="MM_out(this)"><div style="background-color:#fff;width: 170px;height: 180px;position: relative;top: 100px;margin: auto;"><img  src="./images/hotel.png"      style="max-width:90%"/ alt="求教，有这么一个效果，当把鼠标放上去二维码慢慢的出来，鼠标离开二维码慢慢的下去，怎么去实现。_html/css_WEB-ITnose" ><!-- 二维码 --><span style="font-size: 10px;width: 160px;margin-left: 45px;">扫描了解详情</span></div><div id="one1" style="background-color:black;width: 200px;height: 50px;margin-top:100px;position: absolute;border-radius: 0px 0px 20px 20px;"></div><span class="icon-ys01" style="top: 110px;width: 120px;font-size: 30px;margin-left: 85px;position: relative;"></span></div></div>

登录后复制

回复讨论(解决方案)

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结构吧。
有是有其他方法，但会麻烦很多。

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