묻고답하기
한줄메모장에서 분류탭을 사각형으로 바꿔보았는데...
2014.02.02 13:04
카이네드님의 한줄메모장에서 분류탭을 사각형으로 바꿔보았습니다.
(코드를 몰라 여기 저기서 참고해서...)
그런데 마우스 오버시 약간 문제가 있네요.
.sm-tab{position:relative;margin:0 0 10px 0;padding:0;list-style:none;zoom:1;}
.sm-tab:after{content:"";display:block;clear:both}
.sm-tab li{float:left;margin:0 5px 0 0; border:1px solid #ccc; background:transparent;}
.sm-tab li.on{border:1px solid #9966cc; background:#9966cc;}
.sm-tab li a{position:relative;float:left;height:40px;line-height:40px;padding:0 15px;font-size:12px;text-decoration:none;color:#333;letter-spacing:-1px;}
.sm-tab li a:hover{color:#FFF;border:1px solid #9966cc;background:#9966cc;}
.sm-tab li.on a{color:#fff; font-weight:normal;}
6번째줄
.sm-tab li a:hover{color:#FFF;border:1px solid #9966cc;background:#9966cc;}
부분이 마우스 오버시 사각형과 테두리의 색깔을 바꾸는 건데
테두리가 1px 더 생겨서 사각형의 모양이 커져 버리네요.
3번째줄에서 설정한 보더의 색깔이 바뀌는게 아니네요?
코드를 모르면서 짜집기해서 문제가 얼마나 있는지도 모르겠습니다.
능력자분들의 조언 부탁드립니다.
댓글 13
-
정도의길을걷기싫다
2014.02.02 13:15
-
nado0124
2014.02.02 13:25
마우스 오버시
3번째줄에서 지정한 보더의 색깔 #CCC 가
6번째줄에서 지정한 #9966CC 으로 바뀌어야 하는데 바뀌지를 않습니다.
(background 만 바뀝니다. border는 #CCC 그대로네요.)
-
ForHanbi
2014.02.02 13:40
5가 a 부분 css 이고 6이 a:hover css가 되는거죠
만약 마우스 오버시에 변화를 주고 싶으면 3번의
border:1pxsolid#ccc;가 5번으로 가야할듯 합니다. -
nado0124
2014.02.02 13:58
그렇게 하면 아래 '전체'에도 회색 테두리가 생깁니다. '전체'에는 테두리도 보라색이어야 하는데...
-
정도의길을걷기싫다
2014.02.02 13:47
.sm-tab li:hover{border:1px solid #9966cc;background:#9966cc;}해보시겠어요.. -
ForHanbi
2014.02.02 13:51
li:hover가 작동은 하지만 :hover이 a태그용이기 때문에 가급적이면 a를 이용하는게 좋죠...
-
nado0124
2014.02.02 13:59
여기에 문의하기 전에 그렇게 했었습니다.
세번째 '일상'의 글자색이 흰색으로 바뀌어야 하는데, 글자색이 바뀌지 않습니다.
-
ForHanbi
2014.02.02 14:09
요소보기로
.sm-tab li a{position:relative;float:left;height:40px;line-height:40px;padding:015px;font-size:12px;text-decoration:none;color:#333;letter-spacing:-1px;}상위 class나 id 조합으로 color 설정이 있는지 한번 파악해 보십시오.
아마 그럴경우 인거 같은데...
-
ForHanbi
2014.02.02 14:11
아니면 그냥 쉽게
.sm-tab li.on a{color:#fff !important;font-weight:normal;} 해도 되지만썩 권장해 드리기는 힘들고요 ^^
-
ForHanbi
2014.02.02 14:19
사실 원하는 디자인이 잘 파악이 안되어서
on에서는 보라색 테두리 안에 흰색 테두리 그리고 보라색 배경, 흰색 폰트
마우스 오버에서는 보라색 테두리에 보라색 배경,흰색 폰트
일반은 ccc 테두리에 흰색배경에 333 폰트를 원하시는건가요?
-
nado0124
2014.02.02 14:30
일반은 ccc 테두리에 흰색배경에 333 폰트 맞고요,
on과 마우스오버시 둘 다 보라색테두리, 보라색배경, 흰색 폰트입니다.
-
ForHanbi
2014.02.02 14:43
.sm-tab{position:relative;margin:0 0 10px 0;padding:0;list-style:none;zoom:1;}.sm-tab:after{content:"";display:block;clear:both}.sm-tab li{float:left;margin:0 5px 0 0; background:transparent;}.sm-tab li a{position:relative;float:left;height:40px;line-height:40px;padding:0 15px;font-size:12px;text-decoration:none;color:#333;letter-spacing:-1px;border:1px solid #ccc;}.sm-tab li.on a,.sm-tab li a:hover{border:1px solid #9966cc; background:#9966cc;color:#fff;}이렇게 될거 같은데요.li에서는 달리 border이나 기타 color 부분을 안넣고a 에서 처리한 다음에li.on 일때 a와 a:hover 일때 동일한 색을 보여야 하니까 그 조건에서 묶어서 배경색과 보더 컬러를 바꾸면 될거 같습니다. -
nado0124
2014.02.02 14:50
드디어 해결되었습니다. 혼자 한 달 정도 고생했는데...^^
역시 ForHanbi님!! 감사합니다.
border-color:#9966cc
이용해보세요