* { margin: 0; padding: 0;}
ul { list-style-type: none;}
body { font: 14px "Microsoft Yahei"; overflow-x: hidden; background-color: #2B2B2B; }
h1 { width: 900px; margin: 40px auto 100px; font: 32px "Microsoft Yahei"; text-align: center; color: #D3D3D3; }
$(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');
});
});
图片翻转效果
![pro1.jpg](images/pro1.jpg)
请我吃烤鱼!
![pro2.jpg](images/pro2.jpg)
请我吃火锅!
![pro3.jpg](images/pro3.jpg)
请我吃披萨
![pro4.jpg](images/pro4.jpg)
请我吃牛排!