0

我知道这很容易，只是画一个空白。

如果您查看此页面（所有 JS/CSS 都在一个页面上），http://dl.dropbox.com/u/904456/expander.html

你可以看到我有什么。基本上我想做两件不同的事情。

A.) 我只想显示悬停的 .module 的 .module .caption，而不是在悬停时显示两者。B.）我想 slideOut 而不是简单的 .show() 和 slideIn 而不是简单的 .hide() （悬停和取消悬停。）

$(document).ready(function() {
  $(".module .caption").hide();
  $(".module").hover(function() {
    $(".module .caption").show(); 
    },function() {
    $(".module .caption").hide();   
  });
});

我的标记看起来像：

 <div class="module span-1">
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
        <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
        </div><!-- end .caption -->
    </div><!-- end .module -->

 <div class="module span-2">
  <div class="caption">
          <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
      </div><!-- end .caption -->
      <div class="inside">HOVER</div><!-- end .inside -->
        <h1>TITLE</h1>
    </div><!-- end. module -->

希望得到一些帮助！如果您觉得特别慷慨，请解释您的方法（下次）。谢谢！

4

1 回答 1

1

通过调用$(".module .caption").show();，您将在带有 classcaption的元素内显示带有 class 的所有元素module。相反，您想使用有问题的元素（已悬停的元素），您可以使用$(this). 然后，您只需随意切换即可。请参阅jQuery 效果 API以了解您的选择。这是获得所需效果的一种方法：

 $(document).ready(function() {
  $("div.module div.caption").hide();
  $("div.module").hover(function() {
     $(this).find("div.caption").slideDown(); 
   },function() {
     $(this).find("div.caption").slideUp();   
   });
 });

编辑：与其使用 form 的选择器，$('.className')不如使用它$('tag.className')，因为此选择器将使用本机 Javascript 方法getElementsByTagName，而不是循环遍历 DOM 中的所有元素以查找具有给定类的元素。

于 2010-06-05T00:49:14.353 回答