Question

我正在尝试对hr元素实现效果。当用户将鼠标悬停在徽标上时，我希望下面的hr元素的宽度更改为100％并添加一些不透明度。

目前所有hr元素同时发生变化。我怎样才能让它只在变化中徘徊？

这是我目前的代码

$('.img-fluid').hover(function(){
    $(this).animate({
        opacity:0.5
        },200);
    $('.logo').animate({
        width:'100%'
    },200);

},
 function(){
    $(this).animate({
        opacity:1
        },200);
    $('.logo').animate({
        width:'50%' 
    },200);
});

$('.img-fluid').hover(function(){
    $('.logo',this).animate({
        width:'100%'
    },200);
}, function(){
    $('.logo',this).animate({
        width:'50%' 
    },200);

});

HTML：

  <div class="row col-md-11 mx-auto">
    <div class="col-md-2 mx-auto">
      <img src="images/logos/lyle_scott.png" class="img-fluid">
      <hr class="logo"> </div>
    <div class="col-md-2 mx-auto">
      <img src="images/logos/makser.jpg" class="img-fluid">
      <hr class="logo"> </div>
    <div class="col-md-2 mx-auto">
      <img src="images/logos/maxfli.jpg" class="img-fluid">
      <hr class="logo"> </div>
    <div class="col-md-2 mx-auto">
      <img src="images/logos/mizuno.png" class="img-fluid">
      <hr class="logo"> </div>
    <div class="col-md-2 mx-auto">
      <img src="images/logos/odyssey.jpg" class="img-fluid">
      <hr class="logo"> </div>
  </div>

此外，我希望能够缩短此代码并在一个函数中执行所有操作。目前每个效果都是单独处理的。

请参阅此图片以获得更好的主意：https://i.stack.imgur.com/mSIdj.png

Answer 1

我不知道你HTML的结构，但我认为你将鼠标悬停在img-fuild课程上，然后你就会有徽标元素。

 $(".img-fluid").on("mouseover", function () {
         $(this).animate({
            opacity:0.5
            },200);
        $(this).find('.logo').animate({
            width:'100%'
        },200);
    });

Answer 2

如果可以的话，我可能会使用动画或过渡来使用css而不是jQuery。使用：悬停，您不必担心尝试仅影响单个元素，因为它已经如何工作。

Answer 3

如果您只是在选择器中使用该类，您将选择具有相同类的所有元素。在这种情况下，您需要使用jQuery .siblings()方法来获取正确的hr元素，因为hr与您的图像位于同一级别/同一级别元素中。

$(".img-fluid").on("mouseenter", function () {
    $(this).animate({
        opacity:1
    },200);
    $(this).siblings('.logo').animate({
        width:'100%'
    },200);
});
$(".img-fluid").on("mouseleave", function () {
    $(this).animate({
        opacity:0.5
    },200);
    $(this).siblings('.logo').animate({
        width:'50%'
    },200);
});

jQuery和＆＃39;这个＆＃39;问题

3 个答案: