我有一个简单的div,转换是使用Jquery切换功能切换的。
我遇到的问题是效果不会逆转?
$('.mydiv').on('mouseover', function() {
$('.mydiv').not(this).addClass('inactive');
})
$('.mydiv').on('mouseout', function() {
$('.mydiv').removeClass('inactive');
})
.mydiv {
width: 520px;
height: 260px;
float: left;
position: relative;
margin-bottom:40px;
transition:all 10s ease;
opacity: 1;
}
.mydiv.inactive {
transition:all 10s ease;
opacity: 0.2;
}
答案 0 :(得分:1)
还有另一种方法可以通过仅使用css来实现。
.mydiv {
width: 520px;
height: 260px;
float: left;
position: relative;
margin-bottom:40px;
transition:all 10s ease;
opacity: 1;
transition:all 10s ease;
}
.mydiv:hover {
opacity: 0.2;
}
答案 1 :(得分:0)
在mouseover
你需要.mydiv selector to addClass .inactive
在第二行,你阻止它添加,{2}是transition-duration
你声明有10s
transition:all 10s ease;
减少这一点,看看反向效果。
$('.mydiv').on('mouseenter', function() {
$(this).addClass('inactive');
});
$('.mydiv').on('mouseleave', function() {
$(this).removeClass('inactive');
});

.mydiv {
width: 520px;
height: 260px;
float: left;
position: relative;
margin-bottom:40px;
transition:all 1s ease;
opacity: 1;
background:#111;
}
.mydiv.inactive {
transition:all 1s ease;
opacity: 0.2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">
</div>
&#13;