Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   событие при наведении (https://javascript.ru/forum/dom-window/39606-sobytie-pri-navedenii.html)

imediasun1 05.07.2013 12:49

событие при наведении
 
Здравствуйте помогите пожалуйста справиться с задачей.
Динамически ссылки оформляются в тэги div класса nav_side_div
<div id=""class="nav_side_div">
<div id="" class="nav_side_div_hover">
<a href="../../pages/subcat/?cat=<?=$item['id'];?>&catname=<?=$item['name'];?>"><?=$item['name'];?></a>
</div>
<a class="nav_side_div_link" href="../../pages/subcat/?cat=<?=$item['id'];?>&catname=<?=$item['name'];?>"><?=$item['name'];?></a>
</div>

Мне нужно чтобы при наведении на див ссылка nav_side_div_link исчезала а появлялся див class="nav_side_div_hover" и сложность заключается в том что таких блоков ссылок много а мне надо чтобы действие исчезновения и появления происходило именно на том блоке на который происходит наведение, я не силен в js потому попытался изобразить что надо но это не работает обратите внимание на слово this оно указывает что это касается именно того ид в котором располагается эта ссылка
$('.nav_side_div_hover').hide();
$('.nav_side_div').mouseover(function(){
$(this('.nav_side_div_hover')).show();
$('.nav_side_div_link').hide();
});

Но оно не работает, помогите пожалуйста решить эту задачу, всем отозвавшимся большое спасибо

Alim 05.07.2013 13:37

В вашем случае подойдёт

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
.nav_side_div{
width:100px;
}
.nav_side_div_link{
display: block;
}
.nav_side_div_hover{
display: none;
}
</style>
<div id=""class="nav_side_div">
<div id="" class="nav_side_div_hover">
<a href="http://jquery.page2page.ru/">Справочник jq</a>
</div>
<a class="nav_side_div_link" href="https://www.google.ru/">Гугл</a>
</div>

<div id=""class="nav_side_div">
<div id="" class="nav_side_div_hover">
<a href="http://jquery.page2page.ru/">Справочник jq</a>
</div>
<a class="nav_side_div_link" href="https://www.google.ru/">Гугл</a>
</div>


<script>
$(document).ready(function () {
   $('.nav_side_div').mouseover(function(){
      $(this).children('.nav_side_div_link').css('display', 'none');
      $(this).children('.nav_side_div_hover').css('display', 'block');
   });
   $('.nav_side_div').mouseout(function(){
      $(this).children('.nav_side_div_link').removeAttr('style');
      $(this).children('.nav_side_div_hover').removeAttr('style');
   });
});
</script>


Часовой пояс GMT +3, время: 20:06.