我制作了一个名为#work
的{{1}}。内部#work
是名为div
的另一个.item
。问题是我想让div
#work
做出回应。我已经尝试了一切来实现我的目标,但都是徒劳的。我的代码如下:
HTML:
<div id="work"> <!-- Work Links Section Start -->
<div class="item">
<a href="air-ticket.php"><img src="images/work/thumbs/air.jpg" alt="Air Ticket"></a><!-- Image must be 400px by 300px -->
<h3>Air Ticketing</h3><!--Title-->
<!--Category-->
</div><!--/item-->
<div class="item">
<a href="hotelbook.php"><img src="images/work/thumbs/hotelbook.jpg" alt="Hotel Booking"></a><!-- Image must be 400px by 300px -->
<h3>Hotel Booking</h3><!--Title-->
<!--Category-->
</div><!--/item-->
CSS:
#work{
width:930px;
max-width:100%;
position: relative;
margin:0 auto;
line-height: 1.4em;
border:1px solid #000;
}
.item{
border-radius:9px;
width:263px;
max-width:100%;
height:220px;
background-color:#FFF;
margin:15px;
float:left;
-webkit-box-shadow: 0 1px 3px #c3c3c3;
-moz-box-shadow: 0 1px 3px #c3c3c3;
box-shadow: 0 1px 3px #c3c3c3;
overflow:hidden;
-webkit-transition: box-shadow 0.2s ease-in-out;
-moz-transition: box-shadow 0.2s ease-in-out;
-o-transition: box-shadow 0.2s ease-in-out;
-ms-transition: box-shadow 0.2s ease-in-out;
transition: box-shadow 0.2s ease-in-out;
}
.item:hover{
-webkit-box-shadow: 0 0 8px #f38094, 0 0 8px #f38094;
-moz-box-shadow: 0 0 8px #f38094, 0 0 8px #f38094;
box-shadow: 0 0 8px #f38094, 0 0 8px #f38094;
}