如何在div中实现复杂的div（当悬停事件时）？

Question

我想实现像

这样的div

我希望在悬停时显示左图像，显示右图像。我是CSS的新手，并且有任何想法实现这个：/。谁能帮我 ？谢谢 （此图片由Nike.com提供）

Answer 1

你有很多方法可以做到这一点。例如：创建一个看起来像第二个的div作为常规div并将其放在我们现在看到的位置，并将其隐藏在css中，如下所示

div#implantedDiv: { display:none }

在你的javascript中输入这样的代码

$(document).ready(function(){
    $("#mainDiv").mouseenter(function(){
    $("#implantedDiv").css("visibility", "visible");
    });
});

Answer 2

您可以使用CSS：

.product {
  float:left;
  background:rgba(0,0,0,.1);
  min-height:150px;
  margin:10px;
  padding:10px;
  font-family:helvetica;
}

.product .details {
  display:none;  /* initial state */
}
.product:hover .details {
  display:block; /* show only on parent's hover */
}

<div class="product">
  <div class="general-info">GENERAL INFO</div>
  <div class="details">DETAILS</div>
</div>
<div class="product">
  <div class="general-info">GENERAL INFO</div>
  <div class="details">DETAILS</div>
</div>