悬停时替换div（div翻转）

Question

我有两个不同数据的div。我想在悬停时用div替换div。

我可以在CSS中执行此操作，但我的数据包含图像和链接。所以我在css中使用图像我不能把

＆＃13;

＆＃13;

<a href=""></a>

＆＃13;

＆＃13;

＆＃13;

打开图像。 我也有4个不同的潜水图像。 所以我希望当使用悬停该区域时，我的第一个div应该被替换为第二个div。

谢谢

Answer 1

没有给出一个例子，所以我假设。

HTML

<div id="div1">Some data</div>
<div id="div2" style="display:none;">Some other data</div>

Javascript（使用jQuery）

$("#div1").on('mouseover', function() {
    $("#div2").show();
    $(this).hide();
});

这未经过测试，请尝试看看它是否符合您的要求。

Answer 2

如果您不想使用javacript，可以这样做。

您可以更改div的内容。

＆＃13;

＆＃13;

.child-one{
  display : block;
}

.child-two{
  display : none;
}

.parent:hover .child-one{
  display : none
}

＆＃13;

<div class="parent">
  <div class="child-one">
    text of child one
  </div>
  <div class="child-two">
    text of child two
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;