İmleç metnin üzerine getirildiğinde glif simgesinin üzerine gelmesini sağla

Question

İmleci metnin üzerine getirdiğimde yalnızca glif simgesinin üzerine gelmesini nasıl sağlayabilirim? Şu anda sadece imlecimi glifikonun üzerine koyduğumda ancak imleci metnin üzerine koyduğumda hiçbir şey yapmıyor.

<ul class="nav navbar-nav"> 
    <li><a href="#" class="active" ><span class="button hvr-pop glyphicon glyphicon-home" > </span>AVALEHT</a></li> 
    <li><a href="#about "><span class="button hvr-pop glyphicon glyphicon-heart" > </span>MINU TÖÖD </a></li> 
    <li><a href="#contact"><span class="button hvr-pop glyphicon glyphicon-user" > </span>MINUST</a></li> 
    <li><a href="#contact"><span class="button hvr-pop glyphicon glyphicon-envelope" > </span>KONTAKT</a></li> 
</ul> 

.navigatsioon .navbar-default .navbar-nav>li>a:hover + .hvr.pop{ 
    display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    position:absolute; 
} 

Answer 1

canlı örneğini bulabilirsiniz -

numaralı telefona danışın

.navbar-nav li a:hover .hvr-pop{ 
     -webkit-transform: scale(1.2); 
    transform: scale(1.2); 
     display: inline-block; 
    vertical-align: middle; 
    -webkit-transform: translateZ(0); 
    transform: translateZ(0); 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
    -webkit-backface-visibility: hidden; 
    backface-visibility: hidden; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-animation-name: hvr-pop; 
    animation-name: hvr-pop; 
    -webkit-animation-duration: 0.3s; 
    animation-duration: 0.3s; 
    -webkit-animation-timing-function: linear; 
    animation-timing-function: linear; 
    -webkit-animation-iteration-count: 1; 
    animation-iteration-count: 1; 
} 

Teşekkür ederiz.

Answer 2

sadece

.navbar-nav li a:hover .hvr-pop 

Answer 3

Merhaba Eğer aşağıdaki gibi yapabiliriz değiştirmek ... doğru sınıf çağıran değildir;

HTML

<div id="a" class="box">1</div> 
<div id="b" class="box">2</div> 
<div id="c" class="box">3</div> 
<div id="d" class="box">4</div> 

CSS

.box{ 
    width: 50px; 
    height: 50px; 
    background-color:#aaa; 
    display: inline-block; 
} 
#a:hover ~ #c { 
    background: red; 
} 

Ve ben sadece hover.css açmak için gerekli ve HVR içeren her şeyi kopyalanan bu jsfiddle