.png 탐색 모음의 배경 이미지로

저는 HTML과 CSS에 매우 익숙합니다. 이것은 프로젝트가 아니라 오히려 스스로 발견하고 있습니다. 목록 (ul, li)을 사용하여 탐색 모음을 만들려고하는데 검색 아이콘과 사용자 로그인 아이콘을 탐색 모음의 다른 텍스트와 함께 넣으려고했습니다. 이것은 나의 HTML입니다 :.png 탐색 모음의 배경 이미지로

<div class="nav"> 
    <ul> 
     <div class="navBarIcons"> 
      <li class="searchIco"><a href="">search</a></li> 
      <li class="userIco"><a href="">user</a></li> 
     </div> 
     <li><a href="">OVERCLOCKING</a></li> 
     <li><a href="">PERIPHERALS</a></li> 
     <li><a href="">STORAGE</a></li> 
     <li><a href="">POWER SUPPLY</a></li> 
     <li><a href="">GRAPHIC CARDS</a></li> 
     <li><a href="">MEMORY</a></li> 
     <li><a href="">MOTHERBOARDS</a></li> 
     <li><a href="index.html">PROCESSOR</a></li> 
    </ul> 
</div>

이 내 CSS입니다 : 내가하고 싶은 것이 무엇

.userIco {  
    background-image: url(userIco.png);  
    background-repeat: no-repeat;  
    background-size: 25px;  
    background-position: center;  
} 

.searchIco {  
    background-image: url(searchIco.png);  
    background-repeat: no-repeat;  
    background-size: 25px;  
    background-position: center;  
} 

.nav li a:hover {  
    background-color: #195ca1;   
    color: #f2f2f2;   
}

이 아이콘에 마우스를 가져하는 것입니다 그리고 당신은에서 볼 수 있듯이 여전히 (이있을 것 내가 마우스를 가져 가면 화면 캡은 내가 텍스트를 제거하면

가 늘 제대로 정렬) 사라와 나는 마우스를 가져 가면 그것은 혈중 알코올 농도의 전체 블록을 포함하지 않습니다 kground

출처

2016-07-19 Dylan Villaruel

게시 하시겠습니까? hover css? screengrab에서 일어날 가능성이있는 것은 background : color를 설정했기 때문에 색상만으로 설정된 모든 배경이 재설정됩니다. 이 경우에, 당신이 원하는 것은'background-color : color'와 같이 그 밖의 아무것도 변경되지 않도록 색상 만 재 정의하는 것입니다. – Forty

div는'ul'의 자식으로 허용되지 않습니다 ... 잘못된 HTML입니다. 똑같이,'li'는'ul' 이외의 자식이 될 수 없습니다. –

@Forty CSS 코드 –

귀하의 background-image는 <li> 요소로 설정되어 있지만,이 <li>보다 상위 계층에되고있는 귀하의 background-color은, 당신의 <a>로 설정됩니다. 대신 background-color을 li:hover으로 설정하거나 background-image을 <a> 요소로 이동해야합니다. 이미지는 배경색과 같거나 더 높은 레이어에 있어야합니다.

출처

2016-07-19 16:06:45 Forty

을 추가했습니다.이'.nav li : hover { \t background-color : # 195ca1; \t 색상 : # f2f2f2; }'고쳐야했지만 텍스트가 그대로 남아 있었고 텍스트를 제거하면 위치가 잘못되었습니다. 이것이 제가 말하고자하는 것입니다 : http://oi68.tinypic.com/2m7vpqa.jpg –

어떻게 텍스트를 삭제하려고 했습니까? 난 당신이 거기 (여전히 화면 판독기에 유용) 그것을 유지할 수 있다고 생각하고'font-size : 0' 또는'color : transparent'로 설정하십시오. 글꼴 크기를 0으로 설정하거나 텍스트를 제거하면 추가되는 공간이 제거되므로 나머지 코드 설정 방법에 따라 a 또는 li에 너비를 추가해야 할 수도 있습니다. – Forty

그래, 내가 고쳐 줬다, 당신은 나에게 아이디어를 줬다. 나는'.searchIco a {opacity : 0; } '그렇다면 그것은 모두 고정되었다. 고맙습니다! –

.png 탐색 모음의 배경 이미지로

답변

관련 문제