创建 3 个单独的图像，其中包含悬停叠加层和链接

Question

我正在尝试使用悬停图像覆盖 3 个单独的图像 link，但我似乎无法实现这一点。每个 "imgBox" 需要不同的名称，因为图像会有所不同，但是当我使用 "imgBox2" 或 "imgBox3" 并适当更改 css 中的 class 名称时，它不会不工作。另外，我在 div 中输入 link 也不起作用。有人可以告诉我这两个的正确代码吗？

第 link 页：http://oasissoho.com/newsite/

<div width="100%">
<div class="imgBox" style="float:left"></div>
<div class="imgBox" style="float:left"></div>
<div class="imgBox" style="float:left"></div>
<div style="width: 226px; float:left; margin:10px 0 10px 0" >
<a   href="book-tour/"><img src="http://oasissoho.com/newsite/wp-content/uploads/2015/03/book_tour.png" ></a></div>
</div>

CSS

<style type="text/css"> 
.imgBox { width: 226px; 
 height: 226px; 
 margin:10px 18px 10px 0; 
 background: url(http://oasissoho.com/newsite/wp-  content/uploads/2015/03/consulting_box3_226_white.png) no-repeat; } 

.imgBox:hover { 
width: 226px; 
height: 226px; 
margin:10px 18px 10px 0; 
background: url(http://oasissoho.com/newsite/wp- content/uploads/2015/03/consulting_box3_226_black.png) no-repeat; } 

</style>

Answer 1

首先：对所有元素都相同的内容使用类。如果您需要一些不同的样式和一些相同的样式，请使用 2 类 <div class="imgBox imgBox1"> 或类和 ids <div class="imgBox" id="img1">

我不确定您描述的代码为何不起作用，您包含的代码为何起作用，但显然不是您想要的。根据您的描述，我做了以下

.imgBox {
  float: left;
  width: 226px;
  height: 226px;
  margin: 10px 18px 10px 0;
}
.imgBox > a {
  display: block;
  width: 100%;
  height: 100%;
}
#img1 {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_white.png) no-repeat;
}
#img1:hover {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_black.png) no-repeat;
}
#img2 {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_white.png) no-repeat;
}
#img2:hover {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_black.png) no-repeat;
}
#img3 {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_white.png) no-repeat;
}
#img3:hover {
  background: url(http://oasissoho.com/newsite/wp-content/uploads/2015/03/consulting_box3_226_black.png) no-repeat;
}

<div width="100%">
  <div class="imgBox" id="img1">
    <a href="/"></a>
  </div>
  <div class="imgBox" id="img2">
    <a href="google.com"></a>
  </div>
  <div class="imgBox" id="img3">
    <a href="wikipedia.org"></a>
  </div>
</div>

请记住，将 a 标记留空并使其成为块元素实际上可能不是一个好主意。如果您使用 html5，您可以将 <a> 放在 <div> 周围，反之亦然。

创建 3 个单独的图像，其中包含悬停叠加层和链接

Create 3 separate images with hover overlay with links in them

css

overlay

image

hover