响应div内容

时间:2016-03-13 19:16:58

标签: html css

我制作了一个名为#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; 
}

1 个答案:

答案 0 :(得分:0)

以下链接包含CSS媒体规则。您可以确定屏幕大小的CSS规则。 W3 Schools CSS @media Rule