Дочерние элементы и mouseover
Добрый день, возникла такая проблема:
На странице есть много вот таких кусков кода:
<td class="info">
<span class="info_but"></span>
<div class="info_cont"> Ла-ла-ла</div>
</td>
Задача очень простая, нужно что бы при наведении на .info_butt блок .info_cont становился видимым, и, соответственно, наоборот, при убирании курсора за пределы .info_butt блок .info_cont пропадал. Пытался сделать через дочерние элементы. Вот такой код получился:
$('td.info').each(function() {
$(this).children(".info_but").mouseover(function(){
$(this).children(".info_cont").fadeIn();
}).mouseout(function(){
$(this).children(".info_cont").hide();
});
});
Наведение срабатывает, пробовал проверять вставляя alert, а вот $(this).children(".info_cont") никак не хочет скрывать и раскрываться. Быть может потому что $(this) уже в другой функии? Тогда как сделать что бы работало. Заранее спасибо за помощь. |
Потому что .info_cont очевидно не дочерний элемент .info_but. Надо использовать какойнить .sibling\s или там .closest.
|
Как-то так:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<body>
<table>
<tr>
<td class="info">
<span class="info_but">Кнопка 1</span>
<div class="info_cont">Ла-ла-ла</div>
</td>
</tr>
<tr>
<td class="info">
<span class="info_but">Кнопка 2</span>
<div class="info_cont">Ла-ла-ла</div>
</td>
</tr>
<tr>
<td class="info">
<span class="info_but">Кнопка 3</span>
<div class="info_cont">Ла-ла-ла</div>
</td>
</tr>
</table>
<script>
$('.info_but').mouseover(function() {
$(this).next().show();
});
$('.info_but').mouseout(function() {
$(this).next().hide();
});
</script>
</body>
|
| Часовой пояс GMT +3, время: 18:39. |