Html 我正在尝试制作一个图像条，它们（每个图像）在悬停时会产生一种点击效果

悬停效果有效，但仅适用于封装在div中的图像。我希望整个div都能提供悬停效果。 这是我的CSS代码：

#quickstrip {
position: relative;
width: 100%;
height: 100%;
/*background-color: #f4f4f4;*/
background-color: #B4985A;
height: auto;
padding-top: 0px;
margin-top: 0px;
-webkit-border-radius: 5px;
}

.quickstrip_image{
display: block;
float: left;
width: 15% ;
position: relative;
overflow: hidden;
border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
margin: 10px;
box-shadow: 3px 3px 20px #363024;
    background-repeat: no-repeat;
}

.quickstrip_image :hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
top:3px;
margin:0px;
}

这是HTML：

<div id="quickstrip">

<div class="quickstrip_image"><a href="#" target="_self"><img alt="Compass" height="143" src="http://i.imgur.com/ouT4aeC.png" width="117" /> </a></div>

<div class="quickstrip_image"><a href="#" target="_self"><img alt="Compass" height="143" src="http://i.imgur.com/0edw7a0.png" width="117" /> </a></div>

<div class="quickstrip_image"><a href="/#" target="_self"><img alt="Compass" height="143" src="http://i.imgur.com/4ZNPr6T.png" width="117" /> </a></div>

<div class="quickstrip_image"><a href="#" target="_blank"><img alt="Compass" height="143" src="http://i.imgur.com/n1GR9dp.png" width="117" /> </a></div>

<div class="quickstrip_image"><a href="#" target="_blank"><img alt="Compass" height="143" src="http://i.imgur.com/3e771UM.png" width="117" /> </a></div>

<div class="quickstrip_image"><a href="#" target="_self"><img alt="Compass" height="143" src="http://i.imgur.com/ZRIGbGt.png" width="117" /> </a></div>
</div>

我尝试用“quickstrip_image”类添加span标记，认为它可能会起作用，但没有。 图像在div中移动，这不是我想要的，我想要整个div产生悬停效果

---

这是我工作的提琴：

更改

。quickstrip\u image:hover

到

。quickstrip\u image:hover

。空间会产生不同。

更正：

.quickstrip_image:hover{
box-shadow: 1px 1px 5px #363024;
-webkit-box-shadow: 1px 1px 5px #363024;
-moz-box-shadow: 1px 1px 5px #363024;
position:relative;
display: block;
top:3px;
}

删除了quickstrip_图像后面的空间

---

工作小提琴：

不用担心。很高兴我能帮忙