HTML/CSS 호버 배경 이미지

Question

호버 배경에 img를 넣는 데 문제가 있습니다.

그것은 다음과 같아야합니다 Navigation

이 2 개 라인, 호버 투명한 이미지를 표현하고 텍스트 "가정"그 IMG의 중심에 있어야합니다 .. 어떻게 그렇게 아무 생각이 .. 누구? 당신이 CSS에서하지 않는 이유는 영어

.page-container { 
 
    width: 980px; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
} 
 

 
header { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 220px; 
 
    background-color: #EAEAEA; 
 
} 
 

 
.logo { 
 
    text-align: center; 
 
} 
 

 
.logo img { 
 
    margin: 30px 0 0 0; 
 
} 
 

 

 
nav { 
 
    height: 136px; 
 
    
 
} 
 

 

 
ul { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    margin: 70px 0 0 0; 
 
    padding: 0; 
 
    
 
} 
 

 
nav li { 
 
    float: left; 
 
    text-align: center; 
 

 
} 
 

 

 
nav li a { 
 
    margin-right: 165px; 
 
    text-decoration: none; 
 
    float:left; 
 
    font-size: 22px; 
 
    letter-spacing: 3px; 
 
    text-transform: uppercase; 
 
    font-family: font91477; 
 
    color: #9E9E9E; 
 
    background-size: 75px; 
 
    
 

 
} 
 

 
a:focus { 
 
    text-decoration: none; 
 
    color: #9E9E9E; 
 
} 
 

 
a:hover { 
 
    height: 75px; 
 
    text-decoration: none; 
 
    color: #9E9E9E; 
 
    background: url(http://i.imgur.com/P5tF09r.png) no-repeat center; 
 

 
    
 
    
 
}

 
 
    <header> 
 
     <div class="logo"> 
 
      <img src="img/logo.png"/> 
 
     </div> 
 
     
 
     <nav> 
 
      <div class="page-container"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">O Podjetju</a></li> 
 
        <li><a href="#">Produkti</a></li> 
 
        <li><a class="last-child" href="#">Kontakti</a></li> 
 
       </ul> 
 
      </div> 
 
     </nav> 
 
    </header> 
 

Answer 1

just add the following css styles 

a:hover { 
    height: 75px; 
    text-decoration: none; 
    color: #9E9E9E; 
    background: url(http://i.imgur.com/P5tF09r.png) no-repeat center; 
    /*****************here they are ************/ 
    display:flex; 
    align-items: center; 


} 

Answer 2

나쁜 경우

죄송합니다? 이

.menu{ 
 
    list-style: none; 
 
    background-color: #EAEAEA; 
 
    margin: 0; 
 
    padding: 20px 0; 
 
    overflow: hidden; 
 
} 
 

 
.menu__item{ 
 
    float: left; 
 
    margin: 0 20px; 
 
    position: relative; 
 
} 
 

 
.menu__item a{ 
 
    background-color: #EAEAEA; 
 
    text-transform: uppercase; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
.menu__item::after{ 
 
    content:''; 
 
    width: 1px; 
 
    height: 1px; 
 
    background-color: #000; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: 0; 
 
    transform: rotate(-45deg); 
 
    z-index: 0; 
 
    transition: all .25s ease; 
 
} 
 

 
.menu__item:hover::after{ 
 
    width: 50px; 
 
    margin: -1px 0 0 -25px; 
 
}

<ul class="menu"> 
 
    <li class="menu__item"><a>Home</a></li> 
 
    <li class="menu__item"><a>test</a></li> 
 
    <li class="menu__item"><a>very long title for test</a></li> 
 
    <li class="menu__item"><a>test</a></li> 
 
</ul>