Сделать курсор над глификом при наведении курсора на текст
Как сделать так, чтобы при наведении курсора на текст курсором оставался только глифон? Прямо сейчас он зависает только тогда, когда я нацеливаю курсор на глифон, но когда я помещаю курсор на текст, он ничего не делает.
<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;
}
Спасибо.