当我把光标放在文本上时,如何只让字形图标悬停?现在,只有当我把光标放在字形图标上时,它才会悬停,但当我把鼠标放在文本上时,什么也不做。
<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;
}
谢谢。