鼠標懸停時使用jquery

Question

大家好，我在內容編輯器Web部件的代碼是一樣的東西下面

但我即使我鼠標移到第一項獲得描述所有超鏈接。請讓我知道如何以這種方式更改代碼，以便它只顯示懸停在上面的項目iam的描述。如果我不清楚，請告訴我。

我從XSL代碼：

感謝，

Answer 1

讓您的標記看起來像這樣：

<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(); 
     } 
    ); 
    }); 

如果我猜得標記錯誤的，那麼你可以使用jQuery中的parent，find，children和siblings功能進行調整。

Answer 2

應該像下面這樣，但你可以分享你當前的標記？

您的示例標記（以下答案中給出）似乎簡化爲：

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