Question

您好我的内容编辑器Web部件中的代码如下所示

但即使我将鼠标悬停在第一项上，我也会获得所有超链接的描述。请让我知道如何以这种方式更改代码，以便它只显示我悬停的项目的描述。如果我不清楚，请告诉我。

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

如果我猜错标记，那么您可以使用jQuery中的parent，find，children和siblings函数进行调整。

鼠标悬停使用jquery

2 个答案: