display 이용하여 이미지에 마우스 오버시 div 박스가 나타나게 하는 법
푸른나무
안녕하세요.
이게 뭐라고 정말 어렵네요.
이미지 위에 마우스 오버를 하면 이미지의 설명을 넣은 Div 박스가 나타나게 하려고 하는데,
선택자를 잘못 지정한 건지 테스트 삼아 만든 페이지에서 전혀 동작을 하지 않네요.
끙끙대다가 지쳐서 질문 올려요.
고수님들 확인 부탁드립니다.?!doctype htmlhtmlheadmeta charset=UTF-8titleUntitled Document/titlestyle type=text/css*{margin:0; padding:0;}
#box{ background-color:#C04B4D; width:500px; height:500px; position:relative; top:50px; left:50px;}.ulbox{ background-color:#1A58CE; width:300px; height:300px;}.libox{ background-color:#F8F35C; list-style-type:none;}
.infoBox{ background-color:#8DE366; width:50px; height:10px; float:left; position:absolute; top:80px; left:80px; display:none; z-index:999;}
.ulbox li:hover .infoBox{display:block;}
/style/headbodydiv id=box ul class=ulbox il class=libox a href=http://naver.com img src=img/책이미지1.png /a div class=infoBox책이름1 /div /liil class=libox a href=http://naver.com img src=img/책이미지2.png /a div class=infoBox책이름2 /div/li /ul/div
/body/html
-
원술
감사합니다.ㅠㅠㅠㅠㅠ삽질한 걸 생각하니 헛웃음이 나오네요....
-
리카
태그 몇군데가 오타 났습니다. il class=\libox\
body 태그도 없구.... 수정하니 작동은 되는것 같네요. ^^ -
남천
답글 정말 감사합니다!!
-
정훈
.ulbox li:hover + .infoBox{display:block;}