如何实现当鼠标移到某个DIV上，该DIV自动放大120%，移开自动缩回100%？

如题，用JS、JQ都可以，只知道图片可以实现这个效果，那DIV可以实现吗？请高手不吝赐教，谢谢！

推荐答案 2014-07-14

在div元素上添加监听事件，当mouseenter事件发生时，然后通过js或者使用jquery插件来获取div的样式，然后修改，比如$("你的元素id").css("height",120%)，宽度同理；
然后离开的时候同样出发mouseleave或者mouseout，具体哪个忘了。
总之大致的思路就是这样。
望采纳

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/jWjt7ze7etWjvvteWj.html

其他回答

第1个回答推荐于2017-09-26

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#test").mouseover(function(){
$(this).animate({width:"120%"},500);
}).mouseout(function(){
$(this).animate({width:"100%"},500);
});
});
</script>
</head>
<body>
<div style="width:100px;height:100px;">
<div id="test" style="width:100px;height:100px;border:1px solid blue;"></div>
</div>
</body>
</html>本回答被提问者采纳

相似回答

在html5页面中,一个div或者图片,鼠标移动上去的时候变大,移出的时候又...答：一：通过css样式中的 ":hover"实现，代码如下 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{background:red;width:200px;height:200px;}div:hover{background:red;width:500px;height:500px;}</style></head><body><div>变大</div></...

鼠标移动到div中文字变大,移开变回原样答：这个用hover就可以实现div:hover{font-size:200％}hover属性一般是给a标签用的，但是用到div上也可以正常解析只不过说是不符合W3C标准

鼠标放到DIV1上,DIV2匀速向上移动100px;鼠标移开,DIV2匀速回到之前状态...答：<style type="text/css"> div{ width: 100px;height: 100px;border: 1px solid #faa;margin: 20px;} .box2{ margin-top: 200px;transition: margin-top 2s linear 0s;} .box1:hover{ cursor: pointer;} </style> </head> <body> <div class="box1">div1</div> <div class="bo...

css3鼠标移入特效:如何实现div颜色渐变和放大缩小的效果答：现在由我来向大家介绍一下在css3中如何使用transition属性和hover属性实现div颜色渐变和放大缩小的效果。css3中transition属性transition属性是一个简写属性，用于四个过度属性，分别是transition-property，transition-duration，transition-timing-function和transition-delay。transition-property：要运动的样式（默认...

如何实现鼠标移到div标签上就显示p标签中的内容?答：1、新建html文件，在body标签中添加一个div标签，div标签里面嵌套一个p标签，然后添加p标签内容，这里以“演示文本”为例：2、在head标签中添加style标签，然后在style标签中给p标签设置预先显示样式，预先是先不显示的，所以给p标签设置的属性代码是“p {display: none; }”；再给div设置宽和高，这里...

当鼠标移到DIV边缘时变形并可以拖拽这DIV,这怎么做呀?最好不要用...答：这个用js就能实现，我可以先给你个思路用div的onmousemove事件，判断鼠标相对div的位置是否为边缘（这个值得你自己设置）改变div的cursor样式，就能改变鼠标外形改变div的top 和 left 属性，就能动态改变div的位置，即实现拖拽

如何通过JAVASCRIPT实现,当鼠标移动到一个DIV内时,DIV显示,当鼠标移...答：这样是不行D，display是让该控件不显示，而不是隐藏，所以display='none'时，页面上根本不存在该DIV,故不能触发如果你另外用一个按钮什么的触发就行了

js控制一个div移动,当鼠标移动到该div上停止移动,我只做出了移动,求大...答：<body onload="move()"><div id="movediv" onmouseout="move()" onmouseover="stop()"></div><script type="text/javascript">var timer;function move(){,,,}function stop() {//这就是要实现停止的方法clearInterval(timer);}timer要定义在外边，这样stop中才可以用 ...

如何设置当鼠标移动到一个div上时,下面显示两个div答：这是需要javascript完成的 <div id="one" onmouseover="show('item')" onmouseout="hide('item')">调和转罐</div><ul id="item"> <li>一转多</li> <li>多转一</li></ul><style>#item{display:none}</style><script type="text/javascript">function show(obj){ var XS = ...

大家正在搜

鼠标自动移到左上角当鼠标移动到某一位置时鼠标自动移到最下鼠标移到哪个窗口就点那个窗口如何通过双击快速将鼠标移到断尾怎样把鼠标移到左右怎样移我们将鼠标移到网页上面鼠标怎么移到另一个屏幕鼠标移到右边会看不到