Я работаю над навигационной панелью, на которой есть изображение, и там есть ссылки. Когда пользователь наводил эти ссылки, он меняет фон на отображаемое на навигационном изображении изображение и указывает его место по свойству background-position CSS. Теперь я хочу, чтобы все ссылки на моем веб-сайте исчезли, показывая изображение .CLASS:hover
медленно с подключаемым модулем jQuery. Мой код:
HTML:
<div class="navbar"><!-- NavBar Start -->
<a href="#" class="nav_l_home" title="Home"></a>
<a href="#" class="nav_l_services" title="Services"></a>
</div><!-- NavBar End -->
CSS:
.navbar {
background:url(../img/nav.png) no-repeat;
width:828px;
height:72px;
margin:auto;
position:relative;
}
a.nav_l_home {
width:112px;
height:43px;
position:absolute;
bottom:14px;
right:30px;
}
a.nav_l_home:hover {
background:url(../img/nav_hov.png) no-repeat;
background-position: -686px -15px;
}
a.nav_l_services {
width:107px;
height:43px;
position:absolute;
bottom:14px;
right:161px;
}
a.nav_l_services:hover {
background:url(../img/nav_hov.png) no-repeat;
background-position: -560px -15px;
}
mmm sory для плохого объяснения ^ - ^ ".. все, что я хочу, это сделать a.nav_l_home: наведите указатель мыши на зависание мыши, чтобы все это ^^
Если вы хотите, чтобы элемент затухал и исчезал при наведении мыши/мыши, вы можете сделать что-то вроде этого:
$('.foo').hover(
function() {
$('#bar').fadeIn();
},
function () {
$('#bar').fadeOut();
}
);
.hover() принимает два параметра: функцию вызова мыши и функцию вызова мыши. Методы.fadeIn() и.fadeOut() не требуют пояснений. Вы можете отрегулировать длительность эффекта затухания, передав число миллисекунд (целое число) в качестве параметра.