如果第一个div被悬停,我会尝试操纵堆叠在几个父div中的某个类。
我很害怕,因为我无法让这个工作
我创造了一个小提琴 https://jsfiddle.net/h0153wja/9/
但这是代码:
HTML
<div class="testkrams wpb_column vc_column_container vc_col-sm-4">
<div class="inner">
<div class="wrapper">
<div class="cat-title">
<h2> TestText TextTest with break</h2>
</div>
<div class="box">
</div>
</div>
</div>
</div>
JQUERY
$('.testkrams').hover(
function() {
$(this).nextAll(".cat-title").animate({
marginLeft: '100px'
}, 250);
},
function() {
$(this).nextAll(".cat-title").animate({
marginLeft: '0'
}, 250);
}
);
有什么想法吗?
我太累了吗?
谢谢!
答案 0 :(得分:2)
nextAll()
寻找以下兄弟姐妹。 .cat-title
元素是.testkrams
的子元素。您应该使用find()
代替:
$('.testkrams').hover(function() {
$(this).find(".cat-title").animate({
marginLeft: '100px'
}, 250);
}, function() {
$(this).find(".cat-title").animate({
marginLeft: '0'
}, 250);
});
另请注意,您可以使用transition
规则单独使用CSS实现此目的:
.cat-title {
position: absolute;
bottom: 0;
margin-left: 10px;
max-width: 80%;
z-index: 3;
transition: margin-left .25s;
}
.testkrams:hover .cat-title {
margin-left: 100px;
}