li 태그에 마우스 오버시 배경색과 글자색이 변하게 하려면

li 태그에 마우스 오버시 배경색과 글자색이 변하게 하려면

QA

li 태그에 마우스 오버시 배경색과 글자색이 변하게 하려면

본문

리스트(li 태그)가 아래처럼 있습니다.

마우스를 오버할때  해당 메뉴의 배경색이 검은색, 글자색은 흰색으로 변환시키고 싶습니다.

 

1981937434_1519573466.5077.png

(1번재 시도) : 이렇게 하면 되긴 되는데..마우스를 사각형에 마우스오버해도 안되고 ..반드시 글자에 오버해야 원하는데로 되네요... 글자까지 가지않아도 사각형에 마우스오버하면 변하게 하고 싶습니다.

li:hover{background: black;color:white;}
li a:hover{color:white;font-weight:bold;}

 

어떻게 해야 합니까?

 

 

(2번째 시도) : 위의 조건을 다 지우고 아래처럼 하면 사각형 전체의 배경색이 아닌...링크 구분의 배경색만 변해서요..사각형 전체 배경색이 바뀌게 하려면 어떻게 하죠?

li a:hover{color:white;font-weight:bold;background: black;}

 

감사합니다^^

이 질문에 댓글 쓰기 :

답변 2

li:hover{background: black;}
li:hover a { color: white; font-weight: bold }

a 태그에 display:block ;  추가해주시고 li와 사이즈를 맞춰 주세요 

 

답변을 작성하시기 전에 로그인 해주세요.
전체 313
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT