[html] 마우스 오버시 이미지 변경 속에 버튼

html

 

<div class="box">

    <div class="boxCont">

        <ul>

            <li>내용1</li>

            <li>내용2</li>

            <li>내용3</li>

        </ul>

    </div>

</div>

 

 

css

.box {width:150px;height:150px;background:#000;position:relative;}

.box .boxCont {position:absolute;bottom:0;width:150px;height:50px;background:#EEE;display:none;}

.box .boxCont ul {list-style:none;margin:0;padding:0;}

.box .boxCont ul li {width:50px;height:50px;float:left;}

 

.box:hover .boxCont {display:block;}

[출처] [html] 마우스 오버시 이미지 변경 속에 버튼|작성자 밍찡