悬停类的兄弟并更改子类img源对于该类的实例是唯一的

Posted 2021-04-14

我有以下html。基本上是4个类似风格的盒子，彼此串联。当我悬停每个单独的框时，我正在尝试将img src更改为data-alt-src，仅针对正在悬停的各个div。

我在下面进一步使用jQuery来做到这一点。但它是非常硬编码的，我想知道是否有更好的方法来做到这一点？还有一个简单的.4s将是一个巨大的帮助，因为我已经有CSS为背景颜色这样做。主要源图像为蓝色，alt源为白色。

<div class="skillsBox">
    <div class="skill_div">
        <div class="skill_img">
            <img src="css/house.png" data-alt-src="css/house2.png" alt="House"/>
        </div>
        <div class="skill_title">
            <h3>Repairs</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/settings.png" data-alt-src="css/settings2.png" alt="Repair"/>
        </div>
        <div class="skill_title">
            <h3>Improvement</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/shopping-cart.png" data-alt-src="css/shopping-cart2.png" alt="Cart"/>
        </div>
        <div class="skill_title">
            <h3>Affordable</h3>
        </div>
    </div>

    <div class="skill_div">
        <div class="skill_img">
            <img src="css/like.png" data-alt-src="css/like2.png" alt="Like"/>
        </div>

        <div class="skill_title">
            <h3>Satisfaction</h3>
        </div>
    </div>
</div>

这是jQuery：

$(".skill_div:nth-of-type(1)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(1) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(2)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(2) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(3)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(3) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource)
    });

$(".skill_div:nth-of-type(4)").hover(
    function () {
        var $this = $(".skill_div:nth-of-type(4) img");
        var newSource = $this.data('alt-src');
        $this.data('alt-src', $this.attr('src'));
        $this.attr('src', newSource);
    });

非常感谢，我确实尝试研究答案但是找不到我特定的关键词，如果在我道歉之前已经完成了。

答案

您可以简单地为每个.skill_div分配一个事件处理程序，并使用$(this)访问处理函数内的每个特定处理程序：

$(".skill_div").on('mouseenter mouseleave', 
  function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
  }
);

一个甚至不需要javascript的解决方案就是这种CSS方法：

<div class="skill_div">
    <div class="skill_img">
        <img src="css/settings.png" alt="Repair"/>
        <img src="css/settings2.png" alt="Repair"/>
    </div>
    <div class="skill_title">
        <h3>Improvement</h3>
    </div>
</div>
<style type="text/css">
  .skill_div img { transition-duration: .3s; }
  .skill_div img + img { opacity: 0; }
  .skill_div img:first-of-type { position: absolute; }
  .skill_div:hover img:first-of-type { opacity: 0; }
  .skill_div:hover img + img { opacity: 1; }
</style>

另一答案

感谢评论中的所有帮助。我现在用以下代码使眼睛变得更容易：

  $(".skill_div").mouseenter(
   function () {
    var $this = $(this).find("img");
    var newSource = $this.data('alt-src');
    $this.data('alt-src', $this.attr('src'));
    $this.attr('src', newSource)
   }
  )

  $(".skill_div").mouseleave(
   function () {
   var $this = $(this).find("img");
   var newSource = $this.data('alt-src');
   $this.data('alt-src', $this.attr('src'));
   $this.attr('src', newSource)
  }
 )

如果可以更好地改进，请随时添加。