Question

悬停效果有效，但仅限于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>

我尝试使用＆＃34; quickstrip_image＆＃34;添加span标记。上课，认为它可能有用，但没有。图像在div内移动，这不是我想要的，我希望整个div都能产生悬停效果。

这是我工作的小提琴：http://jsfiddle.net/veniarya/ys219nsa/

Answer 1

将.quickstrip_image :hover更改为.quickstrip_image:hover。这个空间有所不同。

Answer 2

更正：

.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_image

之后立即删除空格

工作小提琴：http://jsfiddle.net/veniarya/ys219nsa/

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

2 个答案: