Применение Fading эффекта к каждой ссылке сайта
Добрый день!Второй день бьюсь,над одной проблемой((( подскажите пожалуйста, как ПРАВИЛЬНЕЙ реализовать следующее:
при наведении на ссылки,в меню, к ним применялся определенный стиль с эффектом 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(" "); (убираем дивы);
}
);
});
|
По-моему не очень хорошая идея по hover добавлять html элементы, а потом их удалять.
|
по-моему, лучшей идеей будет применение fading к ссылкам посредством transitions (погуглите, что это. это изменение какого-либо CSS за указанное время. используется в CSS)
... и дальнейшее допиливание этого эффекта для браузеров, которые этот эффект не поддерживают. Но никак не изменение HTML так часто! |
Согласен, изменение html по hover вариант не ОЧ.
можно при открытии страницы обворачивать каждую ссылку в 3 divа без css :
<div >
<div >
<div >
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
но потом по hover как-то определять index "ПРЕДКА" div, и к нему прикручивать стиль. так вот, как вытащить index предка дива? ну и все тот же вопрос как обернуть в 3 дива $(this).wrap("что тут писать"); ? |
Цитата:
|
Цитата:
|
Ну все же, как вытащить Index предка дива? и потом по индексу задать ему стиль,как?:help:
|
какого предка дива ? относительно чего предок ?
насчёт второго вопроса - найти все подобные div , по индексу найти необходимый и присвоить ему стили. |
Цитата:
<div >
<div >
<div >
<a href="#">РЕГИСТРАЦИЯ</a>
</div>
</div>
</div>
при наведении на них мне нужно узнать index дива в который она(ссылка на которую навели) вложена! и потом по индексу применить опред стиль ! таким образом я смогу выцепить все 3 дива и привязывать к ним стили) |
$(this).parents('div').parents('div').parents('div);
|
| Часовой пояс GMT +3, время: 19:22. |