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

【问题标题】：Make glyphicon hover when cursor over text光标悬停在文本上时使字形图标悬停
【发布时间】：2016-07-11 18:53:42
【问题描述】：

当我将光标放在文本上时，如何只让字形图标悬停？现在它只有在我将光标放在字形图标上时才会悬停，但是当我将光标放在文本上时它什么也不做。

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

【问题讨论】：

标签： php html css hover glyphicons

【解决方案1】：

你没有正确调用类...只需更改

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

【讨论】：

我更接近我想要得到的结果。但是效果并没有开始对字形图标起作用。 .navbar-nav li a:hover .hvr-pop{ display: inline-block;垂直对齐：中间； -webkit-transform: translateZ(0);变换：translateZ（0）；盒子阴影：0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility：隐藏；背面可见性：隐藏； -moz-osx-font-smoothing：灰度；颜色：黑色;只有颜色：黑色；工作。

【解决方案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找到活生生的例子

【讨论】：

【解决方案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;
}

谢谢。

【讨论】：