Question

我有9个'卡'div，每张卡都有一个带有'.card-border'类的hr标签，它将border-top设置为5px，宽度设置为60％。当'。card'悬停时，我希望'。card-border'div的宽度动画为100％，并且它应该在mouseleave上恢复为60％宽度。由于有9个'。''div，我需要确保只有悬浮的'.card-border'扩展。我知道我可以通过分配ID并在我的JavaScript中单独选择它们来实现这一点，但我希望有一种更简单的方法来避免所有重复的代码。下面是我到目前为止，虽然使用ID选择器，我试图摆脱。

<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>


$('#family-card').mouseenter(function(){
    $('#family-border').animate({
        width: "100%"
    });
}).mouseleave(function(){
    $('#family-border').animate({
        width: "60%"
    });
});
}

我尝试选择卡类，然后选择firstChild，first（hr）等，但它仍会影响整张卡的宽度。下面是我尝试失败的一个例子：

$('.card').mouseenter(function(){
    $(this).first.animate({
        width: "100%"
    });
}).mouseleave(function(){
    $(this).first.animate({
        width: "60%"
    });
});
}

先谢谢你的帮助！

Answer 1

你不需要jQuery这样的东西。简单的CSS就足够了

.card-border {
  width: 60%;
  transition: width .3s
}

.card:hover .card-border {
  width: 100%;
}

<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

Answer 2

使用JQuery 1.0中定义的.find(..)将搜索输入的元素，然后应用声明的所有函数。基本上，使用： $(this).find("#family-border")，将选择#family-border中声明的第一个this，然后应用动画。

$('#family-card').mouseenter(function(){
    $(this).find('#family-border').animate({
        width: "100%"
    });
}).mouseleave(function(){
    $(this).find('#family-border').animate({
        width: "60%"
    });
});

#family-border {
width: 60%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="family-card" class="card border-0">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>
<div id="family-card" class="card border-1">
  <hr id="family-border" class="card-border">
  <div class="card-block">
    <h5 class="card-title">Family Law</h5>
    <p class="card-text">***** is a full service Family Law Firm.</p>
    <a class="card-link move-right" href="./practice-areas/family-law.html">Learn more »</a>
  </div>
</div>

文档：https://api.jquery.com/find/

JQuery：更容易做出这种选择吗？

2 个答案: