Mouse hover using jquery

Question

Hi My code in content editor web part is something like below

But I am getting description for all hyperlinks even if i mouse over on first item. Please let me know how to change the code in such a way so that it only displays the discription of the item iam hovering on. Please let me know if i am not clear.

My code from XSL:

Thanks,

Answer 1

It should be something like the following, but can you share your current markup?

Your example markup (given in an answer below) appears to simplify to:

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

The jQuery to do what you're trying to do would look something like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<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

Make your markup look like this :

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

Then, in your javascript :

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

If I guessed the markup wrong, then you can adjust it using the parent, find, children and siblings functions in jQuery.