Применение Fading эффекта к каждой ссылке сайта

[Pavel M.]

удобнее вместо parent().parent().parent() использовать parents()

<style type="text/css">
.hover_link_menu_1 {
   border: 1px solid #f00;
}
.hover_link_menu_1 div {
   border: 1px solid #0f0;
}
.hover_link_menu_1 div div {
   border: 1px solid #00f;
}
 
</style>
<div>
  <div>
    <div>
      <a class="mylink" href="/">my link</a>
    </div>
  </div>
</div>
 
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(".mylink").hover(function(){
    $(this).parents(':eq(2)').addClass('hover_link_menu_1');
  }, function(){
    $(this).parents(':eq(2)').removeClass('hover_link_menu_1');
  })
</script>

[sosed2]

Огромное всем спасибо,с вопросом выборки дива разобрался но я опять застрял с одной проблемой!
после применения fadeIn() к диву дописывается style="display: block":

13
<div class="" style="display: block">
14
  <div>
15
    <div>
16
      <a class="mylink" href="/">my link</a>
17
    </div>
18
  </div>
19
</div>

как убрать стиль?? он перекрывает мой класс добавленный с помощью addClass('hover_link_menu_1') (((((((((((

[devote]

.removeAttr('style');

[sosed2]

не одно так другое!у меня снова косяк(

меню при наведении на которое происходит изменение стилей с эффектом FadeIn() я реализовал, но не все так гладко (

.hover_link_menu_1 {

display:none;

color:#FFF;

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;

}

$(document).ready(function() {

$(".color_menu a").wrap('<div />');

$(".color_menu a").wrap('<div />');

$(".color_menu a").wrap('<div />');

$(".color_menu a").hover(

function(){ //over

//	 var index = $(this).parent('div').parent('div').parent('div');

//	 alert(+index);

$(this).parents(':eq(2)').addClass('hover_link_menu_1');

$(this).parents(':eq(1)').addClass('hover_link_menu_2');

$(this).parents(':eq(0)').addClass('hover_link_menu_3');

$(this).parents(':eq(2)').fadeIn();

//$(this).parents(':eq(2)').removeAttr('style');



 },

    function(){ //out

$(this).parents(':eq(2)').removeClass('hover_link_menu_1').removeAttr('style');

$(this).parents(':eq(1)').removeClass('hover_link_menu_2');

$(this).parents(':eq(0)').removeClass('hover_link_menu_3');

 }

            );

                              });

дело в том что,что бы происходил эффект fadein мне необходимо сначала применить к родителю "див" стиль display:none, а уж потом применять fadein,вот тут собака и зарыта!!!!Так как у меня меню построена на основе списков, то при применении стиля display:none меню начинает скакать "дрожать" и если повезет срабатывает, запланированный, fadein ((( посоветуйте, как быть?

у меня есть решение,но я не знаю как его реализовать и не уверен возможно ли так сделать.Если обернуть все это(три дива и ссылка) еще в один див и применить к нему стиль с фиксированной шириной и высотой текста ссылки,то мы избавимся от этого глюка! так вот,реально ли узнать width и height ссылки?и как?

[devote]

var p = $(this).parents(':eq(2)');
p.css({width: p.width() + "px", height: p.height() + "px"}).hide().fadeIn();