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

Question

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

页面链接: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">或类和 ID <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标记为空并使其成为 block 元素实际上可能不是一个好主意。如果您使用的是 html5，则可以将 <a>在你的周围 <div>而不是相反。