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

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

您没有正确调用 class...只需更改

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

Answer 2

您好，您可以按照下面的方式制作；

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

中找到实例

Answer 3

我只需要打开 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;
}

谢谢。

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

Make glyphicon hover when cursor over text

html

css

php

hover

glyphicons