Question

如何在mouseout上恢复悬停不透明效果？我可以毫无问题地让我的悬停效果发生，但我似乎无法撤消它的效果。

<div class="row" style="padding-top:15px">
    <div class="col-xs-6 col-xs-push-3">
        <div class="list-group">
            <a class="list-group-item" href="#">Hello, World</a>
            <a class="list-group-item" href="#">Goodbye, Earth</a>
        </div>
    </div>
</div>

JQuery的：

$(".list-group-item").hover(function() {
    $(this).stop().animate({"opacity": "0.5"});
});

我肯定想在JQuery中做这个效果，而不是纯CSS，因为我需要在之后添加其他功能（文本叠加）。

Answer 1

使用mouseleave回调，它是hover（）

的第二个参数

＆＃13;

$(".list-group-item").hover(function() {
  $(this).stop().animate({
    "opacity": "0.5"
  });
}, function() {
  $(this).stop().animate({
    "opacity": 1
  });
});

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="row" style="padding-top:15px">
  <div class="col-xs-6 col-xs-push-3">
    <div class="list-group">
      <a class="list-group-item" href="#">Hello, World</a>
      <a class="list-group-item" href="#">Goodbye, Earth</a>
    </div>
  </div>
</div>

＆＃13;

你也可以使用缩短版本，如

$(".list-group-item").hover(function (e) {
    $(this).stop().animate({
        "opacity": e.type=='mouseenter' ? .5 : 1
    });
});

＆＃13;

$(".list-group-item").hover(function(e) {
  $(this).stop().animate({
    "opacity": e.type == 'mouseenter' ? .5 : 1
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" style="padding-top:15px">
  <div class="col-xs-6 col-xs-push-3">
    <div class="list-group">
      <a class="list-group-item" href="#">Hello, World</a>
      <a class="list-group-item" href="#">Goodbye, Earth</a>
    </div>
  </div>
</div>

＆＃13;

Answer 2

您可以使用hover的第二个参数。这将在元素的mouseout时运行。

$(".list-group-item").hover(function() {
    $(this).stop().animate({
        "opacity": "0.5"
    });
}, function() {
    $(this).stop().animate({
        "opacity": "1"
    });
});

演示：https://jsfiddle.net/tusharj/3jeezjrb/1/

我建议你使用css而不是jQuery：

.list-group-item:hover {
    opacity: .5;
}

演示：https://jsfiddle.net/tusharj/3jeezjrb/2/

切换悬停不透明度

2 个答案: