Наведите курсор мыши с помощью jquery

Question

Привет Мой код в веб-части редактора контента выглядит примерно так

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

Мой код из XSL:

Спасибо

Answer 1

Должно быть что-то вроде следующего, но можете ли вы поделиться текущей разметкой?

Ваша примерная разметка (приведенная в ответе ниже), по-видимому, упрощается до:

<div class="divTitleLink">
    <a target="_blank"> ... Link 1 </a>
</div>
<div class="divDescription">
    ... Description 1
</div>
<div class="divTitleLink">
    <a target="_blank"> ... Link 2 </a>
</div>
<div class="divDescription">
    ... Description 2
</div>
<div class="divTitleLink">
    <a target="_blank"> ... Link 3 </a>
</div>
<div class="divDescription">
    ... Description 3
</div>

JQuery для выполнения того, что вы пытаетесь сделать, будет выглядеть примерно так:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.divTitleLink a').hover(
            function () {
                $(this).parents('.divTitleLink').next('.divDescription').show();
            },
            function () {
                $(this).parents('.divTitleLink').next('.divDescription').hide();
            } 
        ); 
    });  
</script>

Answer 2

Сделайте так, чтобы ваша разметка выглядела так:

<div class="divTitleLink">
  <a>Your First link</a>
  <div class="divDescription">Your First Description</div>
</div>
<div class="divTitleLink">
  <a>Your Second link</a>
  <div class="divDescription">Your SecondDescription</div>
</div>
...

Тогда в вашем javascript:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>          
<script type="text/javascript">                                         
  $(document).ready(function() {
    $('a').hover(
      function () {
        $(this).parent('div').find('.divDescription').show();
      }, 
      function () {
        $(this).parent('div').find('.divDescription').hide();
      }
   );
  }); 

Если я угадал разметку неправильно, вы можете отрегулировать ее, используя функции parent , find , children и siblings в JQuery.