Форум

MasterDmx · #1 (**permalink**) 17.09.2014, 17:32

Добрый день, возникла такая проблема:

На странице есть много вот таких кусков кода:

<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) уже в другой функии? Тогда как сделать что бы работало.

Заранее спасибо за помощь.

Aetae · #2 (**permalink**) 17.09.2014, 17:59

Потому что .info_cont очевидно не дочерний элемент .info_but. Надо использовать какойнить .sibling\s или там .closest.

Safort · #3 (**permalink**) 17.09.2014, 18:05

Как-то так:

<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>

Форум

Справочник

Discord чат

Курсы javascript