Question

我为我的网站创建了一个图像网格。我在样式表中创建了网格，然后在html中创建了带有链接的图像。我现在想将其移到当我将鼠标悬停在其中一张图像上时，它会交换到另一张图像上。我有18张图像，所以18张悬停。

谢谢

这是我使用的html，我使用了18个版本

<div class="row22">
<div class="column22"><a href="https://www.allegrodanceboutique.com/ambassadors/isabella-shaker"><img style="width: 100%;" src="//static.shoplightspeed.com/shops/608846/files/13773857/isabella-shaker.jpg" /></a></div>

和CSS

/* image containers */
.column22 {
  float: left;
  max-width: 20%;
  min-width: 300px;
  padding: 5px;
}

/* Clear floats after image containers */
.row22::after {
  content: "";
  clear: both;
  display: table;
}

Answer 1

有多种方法可以做到这一点。您可以使用javascript / jquery进行操作，也可以使用CSS进行操作。

.Standard{
display:inline-block;
}
.column22:hover .Standard{
display:none;
}

.ShowOnHover{
display:none;
}
.column22:hover .ShowOnHover{
display:inline-block;
}

<div class="row22">
<div class="column22">
<a href="https://www.allegrodanceboutique.com/ambassadors/isabella-shaker">
<img class="Standard" style="width: 100%;" src="https://ichef.bbci.co.uk/news/660/cpsprodpb/37B5/production/_89716241_thinkstockphotos-523060154.jpg" />
<img class="ShowOnHover" style="width: 100%;" src="https://ichef.bbci.co.uk/images/ic/208x117/p0792vnb.jpg" />
</a></div>

在这里，我将两个图像都放在同一<a>中。不管是否悬停，我都会隐藏/显示图像。（很抱歉，这些类的命名不好，我这样做是为了让您更加清楚）

您应该知道，如果以此方式进行操作，则所有图像都将被加载到页面上。如果它们很大，您可能不希望这样做，因为这会花费一些时间。

在这种情况下，您应该使用Javascript / jquery。

然后您可以使用以下jquery代码：

$('.img_class').hide(); // to hide image
$('.img_class').show(); // to show image

需要更改悬停时的图像以获取网格中的图像

1 个答案: