CSS + HTML 鼠標在圖片上懸停時的顯示文字，移走時文字消失

 鼠標在圖片上懸停時的顯示介紹，移走時介紹消失

 加載完成時的效果圖

 

鼠標懸停時彈出的效果

 

 

 

 

 樣式

html,
            body {
                height: 100%;
            }
            
            #div1 {
                width: 1110px;
                height: 530px;
                border: 3px solid pink;
                overflow: hidden;
                position: absolute;
            }
            
            #div2 {
                margin-right: -30px;
                margin-bottom: -30px;
                overflow: auto;
            }
            
            .box {
                position: relative;
                width: 350px;
                height: 250px;
                margin: 0 30px 30px 0;
                background-size: 100% 100%;
                float: left;
            }
            .box img{
                width: 350px;
                height: 250px;
            }
            
            .box:hover .details {
                display: block;
            }
            
            .text {
                position: absolute;
                bottom: 0px;
                width: 100%;
                line-height: 30px;
                background-color: rgba(0, 0, 0, 0.3);
            }
            
            .blank {
                float: left;
                width: 80px;
                background-color: transparent;
                height: 30px;
            }
            
            .h3 {
                float: left;
                width: 140px;
                text-align: center;
                color: #ffffff;
            }
            
            .details {
                color: #FFFFFF;
                display: none;
            }
            
            .price {
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                width: 90px;
                background-color: rgba(0, 0, 0, 0.3);
                color: white;
            }
            
            .price div {
                height: 30px;
                position: absolute;
                top: 0;
                bottom: 0;
                right: 0;
                left: 0;
                margin: auto;
            }

View Code

 

HTML

<div id="div1">
            <div id="div2">
                <div class="box" >
                    <img src="img/123.jpg"/>
                    <div class="text">
                        <div class="blank"></div>
                        <div class="h3">
                            <h3>鉑金假日酒店</h3>
                            <p class="details">
                                假日酒店遍佈全美國高速公路可以通達的每個地方，並走向全世界，從而使假日酒店集團成爲世界上第一家
                            </p>
                        </div>
                        <div class="price">
                            <div>￥399/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/5f1.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>吉安國際酒店</h3>
                            <p class="details">
                                吉安國際酒店是集餐飲、旅業、會議、休閒娛樂爲一體的吉安唯一涉外綜合型商務酒店
                            </p>
                        </div>
                        <div class="price">
                            <div>￥699/起</div>
                        </div>
                    </div>
                </div>
                <div class="box" >
                    <img src="img/91.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>杭州逸大酒店</h3>
                            <p class="details">
                                杭州逸酒店地處市中心區域，距西湖僅10分鐘車程，毗鄰歷史悠久的武林廣場。
                            </p>
                        </div>
                        <div class="price">
                            <div>￥1298/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/a32.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>香格里拉大酒店</h3>
                            <p class="details">
                                香格里拉酒店集團便不斷向國際邁進；以香港爲大本營，今日香格里拉已是大的豪華酒店
                            </p>
                        </div>
                        <div class="price">
                            <div>￥788/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/e0.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>企鵝酒店</h3>
                            <p class="details">
                                長隆企鵝酒店，緊鄰海洋王國主題公園；主題客房數量達2000間，擁有難得一見的企鵝館
                            </p>
                        </div>
                        <div class="price">
                            <div>￥899/起</div>
                        </div>
                    </div>
                </div>
                <div class="box">
                    <img src="img/e500.jpg"/>
                    <div class="text">
                        <div class="blank">
                        </div>
                        <div class="h3">
                            <h3>南油大酒店</h3>
                            <p class="details">
                                珠海南油大酒店坐落於風景秀麗的水灣路地段，交通便利，距吉大商業中心及情侶路僅百米之遙。
                            </p>
                        </div>
                        <div class="price">
                            <div>￥999/起</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>