Question

我的画布上装满了给定的随机不透明度的圆圈。我希望有一个悬浮函数将不透明度设置为0.5，但是当用户将鼠标移开鼠标时，我想恢复到元素的前一个不透明度。问题是，使用当前函数，所有项目都会恢复为单个不透明度值，而不是之前的相应值。

$( "circle" ).hover(
    function() {
        var initOpacity = $(this).attr('opacity');
        $(this).animate({"opacity": '0.5'}, 200);
    }, function() {
        var initOpacity = $(this).attr('opacity');
        $(this).animate({"opacity": initOpacity}, 200);
    }
);

谢谢

Answer 1

如果您能够使用css3，则可以使用名为hover p:hover的属性，它将为您完成所有这些操作。你可以在css本身中设置不透明度

所以你会有这样的事情：

p{background-color: red; opacity: 100%; transition: opacity 1s; } 
p:hover{ opacity: 50%;}

不确定是否必须在后者中设置颜色，它可能会继承另一个颜色。

抱歉，错过了过渡部分。

Answer 2

您可以将值存储在每个元素的数据属性中，然后无需为每个悬停创建许多其他事件处理程序。

＆＃13;

$(".circle").on({
mouseenter: function () {

    // Get opacity
    var  originalOpacity = $(this).css('opacity');
    
    // Store value
    $(this).data('originalOpacity', originalOpacity);
   
    // Fade out
    $(this).animate({'opacity': '0.5'}, 200);
},
mouseleave: function () {
    
    // Get opacity
    var targetOpacity = $(this).data('originalOpacity');
    
    // Fade in
    $(this).animate({'opacity': targetOpacity}, 200);
}
});

＆＃13;

.circle {
     border-radius: 100px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="circle" style="opacity: 0.7;" src="http://placehold.it/100x100">
    <img class="circle" style="opacity: 0.4;" src="http://placehold.it/100x100">
        <img class="circle" src="http://placehold.it/100x100">
            <img class="circle" style="opacity: 0.1;" src="http://placehold.it/100x100">

＆＃13;

jquery Hover - 在鼠标输出时设置初始不透明度值

2 个答案: