カーソルをテキストの上にカーソルを置くと、グリフコンのホバーが表示されます

Question

カーソルの上にカーソルを置くと、グリフコンだけをマウスで動かすことができますか？今はグリフコン上にカーソルを置いたときにだけカーソルが移動しますが、テキスト上にカーソルを置いても何もしません。

<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

でのライブの例を見つけることができます-popから

.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; 
} 

ありがとうございます。

Answer 2

あなただけ

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

Answer 3

こんにちはあなたは次のようにそれを作ることができます変更...正しくクラスを呼び出していません。

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; 
} 

そして、あなたは、私はちょうどhover.cssを開くために必要とHVRを含むすべてのものをコピーし、このjsfiddle