jQuery：.mouseover() .mouseout()
jQuery：.mouseover() .mouseout()
提问于 2014-12-14 14:17:21
我是jQuery的新手，我有这个div，里面有一个图像和文本:在鼠标上-整个div应该向下移动，而在鼠标上-离开它应该回到它原来的位置。如果我在文本上触发鼠标，它会正常工作，但是如果我在父div或图像上做同样的操作，div就会继续上下移动。
这是我的HTML：
<div id="sidebar">
<a href="/">
<img src="//path" width="150" style="margin-bottom:5px;" />
</a>
<div id="mydesc"></div>
</div>我的抄本是：
$('#sidebar').mouseover(function(){
$('#mydesc').animate({
'marginTop':"30"
});
});
$('#sidebar').mouseout(function(){
$('#mydesc').animate({
'marginTop':"0"
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2014-12-14 14:47:28
这应该能解决问题。我以前也有过这个问题。只需使用.hover()和两个函数http://api.jquery.com/hover/。第一个功能是鼠标，其他功能是鼠标保存。通过使用这种方式，您可以减少代码，并且更容易跟上。http://jsfiddle.net/9urkfub2/
$(document).ready(function(){
$("#sidebar").hover(
function(){
$('#mydesc').animate({
'marginTop':"30"
});
}, function(){
$('#mydesc').animate({
'marginTop':"0"
});
});
});Stack Overflow用户
发布于 2014-12-14 14:39:45
使用这个CSS。
.grow {
display: inline-block;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.grow:hover {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}应用hover.css效果后的示例元素：
<a class="button grow">Add to Basket</a>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27470216
复制相关文章
相似问题
腾讯云开发者
