所属分类:网页特效-图片特效,滑块/旋转/滚动
<link rel="stylesheet" href="animate.css">
<script src="jquery-1.8.3.min.js"></script>
$(function(){
var $animate = $('#animate');
var $opposite = $('#opposite');
$(".wrap").hover(function(){
$animate.removeClass();
$opposite.removeClass();
$animate.addClass("test");
$opposite.addClass('test2');
},function(){
$animate.removeClass();
$opposite.removeClass();
$animate.addClass("test2");
$opposite.addClass('test');
});
$(".well-item").hover(function(){
$(this).find(".correct").children().removeClass();
$(this).find(".opposite").children().removeClass();
$(this).find(".correct").children().addClass("test");
$(this).find(".opposite").children().addClass('test2');
},function(){
$(this).find(".correct").children().removeClass();
$(this).find(".opposite").children().removeClass();
$(this).find(".correct").children().addClass("test2");
$(this).find(".opposite").children().addClass('test');
});
});
<div class="well">
<div class="well-item">
<div class="correct"><img class="" src="pro1.jpg" /></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
请我吃烤鱼!
</div>
</div>
</div>
</div>
</div>
<div class="well-item">
<div class="correct"><img class="" src="pro2.jpg" /></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
请我吃火锅!
</div>
</div>
</div>
</div>
</div>
<div class="well-item">
<div class="correct"><img class="" src="pro3.jpg" /></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
请我吃披萨
</div>
</div>
</div>
</div>
</div>
<div class="well-item">
<div class="correct"><img class="" src="pro4.jpg" /></div>
<div class="opposite">
<div class="">
<div class="opposite-content">
<div class="opposite-content-text">
请我吃牛排!
</div>
</div>
</div>
</div>
</div>
</div>