将鼠标悬停在另一个div上时设置div动画
将鼠标悬停在另一个div上时设置div动画
提问于 2014-09-01 16:46:01
我这里的问题是，我有一个图像和标题的网格，这些图像都有相同的类。
因此，网格中每个图像和标题的HTML是
<a href="">
<div class="front-menu-image">
<img src="" width="224" height="224"/>
</div>
<div class="front-menu-title">TITLE</div>
</a>我试过了：
jQuery(document).ready(function($){
jQuery('.front-menu-image').hover(
function () {
jQuery(.front-menu-title).animate({height:'50'});
},
function () {
jQuery(.front-menu-title).animate({height:'25'});
}
);
});但很明显，这导致网格中的所有内容都被动画处理，而我只想让问题中的一个受到影响。
回答 3
Stack Overflow用户
发布于 2014-09-01 16:50:49
试试这个：
$(function(){
$(".front-menu-image").hover(
function(){
$(this).siblings(".front-menu-title").animate({height: '50'})
}
);
});您可以在事件处理程序中使用this来引用当前对象。
Stack Overflow用户
发布于 2014-09-01 16:48:02
试试这个。
jQuery(document).ready(function($){
jQuery('.front-menu-image').hover(
function () {
jQuery(this).next('.front-menu-title').animate({height:'50'});
},
function () {
jQuery(this).next('.front-menu-title').animate({height:'25'});
}
);
});它对事件处理程序的赋值是相同的，但在它内部，它查找下一个带有title类的元素，这与您所悬停的对象相关(请参阅this的使用)。
Stack Overflow用户
发布于 2014-09-01 17:10:43
这将仅对您将在其上悬停的图像进行动画处理：
jQuery(document).ready(function($){
jQuery('.front-menu-image').on('hover', function () {
jQuery(.front-menu-title).animate({height:'50'});
},
function () {
jQuery(.front-menu-title).animate({height:'25'});
}
);
});要了解更多关于.click()和.on('click')之间的区别的信息，请参阅此处的Difference between .on('click') vs .click()
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25602015
复制相关文章
相似问题
腾讯云开发者
