Добрый день!Второй день бьюсь,над одной проблемой((( подскажите пожалуйста, как ПРАВИЛЬНЕЙ реализовать следующее:
при наведении на ссылки,в меню, к ним применялся определенный стиль с эффектом Fading() .
1.например, что бы при наведении на ссылку она заворачивалась в html теги.
пример. меню до наведения:
.hover_link_menu_1 {
border-width:0px;
background-image:url(../img/2.jpg);
background-repeat:repeat-x;
}
.hover_link_menu_2 {
border-width:0px;
background-image: url(../img/1.jpg);
background-repeat: no-repeat;
padding-left:5px;
}
.hover_link_menu_3 {
border-width:0px;
background-image:url(../img/3.jpg);
background-repeat: no-repeat;
background-position:right;
padding-right:5px;
padding-bottom:4px;
padding-top:2px;
}
</div>
<div class="user_menu">
<ul style=" float:right" id="menu_header">
<li>
<a href="#">РЕГИСТРАЦИЯ</a>
</li>
<li>
<a href="#">ВХОД</a>
</li>
</ul>
</div>
после(навели на "РЕГИСТРАЦИЯ" ):
<div class="user_menu">
<ul style=" float:right" id="menu_header">
<li>
<div class="hover_link_menu_1">
<div class="hover_link_menu_2">
<div class="hover_link_menu_3">
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
</li>
<li>
<a href="#">ВХОД</a>
</li>
</ul>
</div>
По идее здесь нужно воспользоваться функцией:
$(this).wrap("<div id='' />");
но как обернуть ссылку в 3 дива ?
2.
Ну и главный вопрос, как применить Fading() к ссылке с добавленными дивами?
наверно,проще будет применить display none к диву с классом hover_link_menu_1 и следом Fading() ?
примерно так:
$(document).ready(function() {
$(".float a").hover(
function(){ //over
$(this).wrap("<div id='' />"); (как-то обварачиваем 3мя дивами)
$(".hover_link_menu_1").css("display","none"); (тушим главный див "предок")
$('.hover_link_menu_1').fadeIn(); (появление кнопки со стилями)
},
function(){ //out
$('.hover_link_menu_1').fadeOut();
$(this).wrap(" "); (убираем дивы);
}
);
});
