父DIV悬停时图像和文本属性的更改

Question

所有人

我是个初学者。让我们首先通过鼓励堆栈溢出来提出这个问题。

https://codepen.io/noxwon/pen/RwrmxKX

这是我的代码。正如您所看到的，它是基本的。很多简单的重复代码

    $("#box-1").hover(
    function () {
        // hover in
        $("#box-1").css("background-color", "#DA4E51");

        $("#box-1 > .icon-link").css("color", "#fff");
        $("#box-1 > .text > p").css("color", "#fff");
        $("#icon-img-1").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png");
    },
    function () {
        // hover out
        $("#box-1").css("background-color", "#fafafa");
        $("#box-1").css("color", "#000");
        $("#box-1 > .icon-link").css("color", "#000");
        $("#box-1 > .text > p").css("color", "#000");
        $("#icon-img-1").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png");
    }
);

$("#box-2").hover(
    function () {
        // hover in
        $("#box-2").css("background-color", "#DA4E51");

        $("#box-2 > .icon-link").css("color", "#fff");
        $("#box-2 > .text > p").css("color", "#fff");
        $("#icon-img-2").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png");
    },
    function () {
        // hover out
        $("#box-2").css("background-color", "#fafafa");
        $("#box-2").css("color", "#000");
        $("#box-2 > .icon-link").css("color", "#000");
        $("#box-2 > .text > p").css("color", "#000");
        $("#icon-img-2").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png");
    }
);

$("#box-3").hover(
    function () {
        // hover in
        $("#box-3").css("background-color", "#DA4E51");

        $("#box-3 > .icon-link").css("color", "#fff");
        $("#box-3 > .text > p").css("color", "#fff");
        $("#icon-img-3").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png");
    },
    function () {
        // hover out
        $("#box-3").css("background-color", "#fafafa");
        $("#box-3").css("color", "#000");
        $("#box-3 > .icon-link").css("color", "#000");
        $("#box-3 > .text > p").css("color", "#000");
        $("#icon-img-3").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png");
    }
);

$("#box-4").hover(
    function () {
        // hover in
        $("#box-4").css("background-color", "#DA4E51");

        $("#box-4 > .icon-link").css("color", "#fff");
        $("#box-4 > .text > p").css("color", "#fff");
        $("#icon-img-4").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png");
    },
    function () {
        // hover out
        $("#box-4").css("background-color", "#fafafa");
        $("#box-4").css("color", "#000");
        $("#box-4 > .icon-link").css("color", "#000");
        $("#box-4 > .text > p").css("color", "#000");
        $("#icon-img-4").attr("src", "http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png");
    }
);

我想让这一切变得简单。我该怎么做呢？这个循环对我来说很难。

感谢您的关注。

Answer 1

你根本不需要javascript来做这件事。可以使用css在悬停时更改元素的样式。您可以在元素中同时包含两个图像，但随后使用css display block/none隐藏/显示右侧图像。

.box {
   background: white;
   color: black;
}

.box:hover {
   background: red;
   color: white;
}

.box:hover .img-1 {
   display: none
}

.box:hover .img-2 {
   display: block
}

​

.wrapper-icons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.box {
    background-color: #fafafa;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2), 0px 0px 2px rgba(0, 0, 0, 0.2);
    width: 180px;
    margin: 20px;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.box:hover {
  background-color: #DA4E51;
}

.box:hover a.icon-link {
  color: #FFF;
}

.box:hover .icon-img-1 {
  display: none;
}

.box:hover .icon-img-2 {
  display: inline;
}

.box .text {
    padding: 24px;
    text-align: center;
}

a.icon-link {
    text-decoration: none;
    color: #000;
}

.icon-img-2 {
  display: none;
}

img { width: 70px; }

<div class="wrapper-icons">
  
  <div class="box">
    
    <a class="icon-link" href="https://google.com">
      
      <div class="text">
        
        <div class="title">
          
          <img class="icon-img-1" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" name="MyImage" />
          
          <img class="icon-img-2" 
               src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png" name="MyImage" />
          
        </div>
        
        <p class="box-text">SET1</p>
        
        <p>Movie</p>
        
      </div>
    </a>
    
  </div>

 
</div>

​