이미지롤오버효과시 셀렉트는 어떻게 하나여?
바름
.TNAVI {margin:0; padding:13px 0 0 0; width:379px; height:48px;}
.TNAVI li{display:inline; padding:0 5 0 5;}
.TNAVI li a.tab1{width:59px; height:30px; background:url(img/btn_main_1n.gif) no-repeat;}
.TNAVI li a.tab1:hover{width:59px; height:30px; background:url(img/btn_main_1h.gif) no-repeat;}
.TNAVI li a.tab2{width:59px; height:30px; background:url(img/btn_main_2n.gif) no-repeat;}
.TNAVI li a.tab2:hover{width:59px; height:30px; background:url(img/btn_main_2h.gif) no-repeat;}
.TNAVI li a.tab3{width:59px; height:30px; background:url(img/btn_main_3n.gif) no-repeat;}
.TNAVI li a.tab3:hover{width:59px; height:30px; background:url(img/btn_main_3h.gif) no-repeat;}
.TNAVI li a.tab4{width:89px; height:30px; background:url(img/btn_main_4n.gif) no-repeat;}
.TNAVI li a.tab4:hover{width:89px; height:30px; background:url(img/btn_main_4h.gif) no-repeat;}
.TNAVI li a.tab5{width:53px; height:30px; background:url(img/btn_main_5n.gif) no-repeat;}
.TNAVI li a.tab5:hover{width:53px; height:30px; background:url(img/btn_main_5h.gif) no-repeat;}
ul class=TNAVI
li class=tab1sa href= class=tab1 title=상품검색/a/li
lia href= class=tab2 title=신규상품/a/li
lia href= class=tab3 title=히트예감/a/li
lia href= class=tab4 title=베스트 TOP100/a/li
lia href= class=tab5 title=MD추천/a/li
/ul
현재 이렇게 코딩을했는데요..
링크인 경우와 오버를 했을때는 해결했는데 클릭을해서 해당페이지 갔을때 선택된이미지(예:btn_main_5s.gif) 가 나오게 할려고 하는데 잘 안되네여..;;
지마켓에 상단메뉴가 그렇게 되있길래 봤더니 스크립인듯..ㅠㅠ
css로는 구현이 불가능한가여??
아 그리고요 a /a 사이에 텍스트를 써놓고 텍스트만 없애고 싶은데 어떻게 하나여..;;?
em상품검색/em 해서 em에 display：none주면 될까여? = 적으면서 생각난거라 적어봐여..;;
-
우주
id값 부여 시 소문자로 쓰시길 바랍니다.. 큰 레이아웃에 대문자를 주셔도 상관없지만 레이아웃안에 들어갈 컨텐츠의 div마크업 구조로 되어있다면 가급적 소문자로 쓰시는게 훨씬 보기쉽고 깔끔할 것 같습니다.^^
-
라임나무
a/a사이에 css로 정의된 이미지를 넣는다는 걸로 알고 설명 드리겠습니다.
text-indent: -10000px; 이건 들여쓰기하는 속성인데 이걸 화면밖으로 설정을 해 버리면
나타나지 않게됩니다. a가 인라인태그라서 이렇게 해버리면 클릭을 해야 할부분이 없어진것이기
때문에 display:block; 이것을 적어주세요. 책을보시면 아실테구요....
그리고, 제 경험상 파이어폭스에서는 저렇게만 적어주면 해당 태그를 클릭했을때 점선부분이
text-inde -
핑크펄
body 에 id 값을 부여해서 작업하시면 됩니다.
해당 id 값일때 관련 tab 에 hover 가 적용되도록 하면 됩니다.
실용예제로 배우는 웹표준 310페이지에 보시면 자세히 나와요~