当光标悬停在文本上时,使字形图标悬停


Make glyphicon hover when cursor over text

当我把光标放在文本上时,如何只让字形图标悬停?现在,只有当我把光标放在字形图标上时,它才会悬停,但当我把鼠标放在文本上时,什么也不做。

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

您没有正确调用类。。。只需更改

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

嗨,您可以按如下方式制作;

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

你可以在这个jsfiddle 中找到实际的例子

我只需要打开hover.css并将包含hvr 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;
}

谢谢。