0

我觉得这应该工作：

   $(".module .one").hover(function() {
     $("#one").addClass('red');
   });

基本上我在加载时隐藏“#viewport 的所有 .children（#one 是），然后当一个单独的元素悬停时，（在本例中为 .module .one）我想在 #viewport 中更改某些内容，特别是 #one .

基本思想是一个可变内容窗口，当缩略图或我放入模块中的任何内容时，会交换视口中显示的内容。我做错了什么？

这是我的完整 JS：

<script type="text/javascript">
 $(document).ready(function() {
  $(".module .caption").hide();
  $("#viewport").children().hide();
  $(".module").hover(function() {
     $(this).find(".caption").slideDown().end().siblings('.module').addClass('under');
   },function() {
     $(this).find(".caption").slideUp().end().siblings('.module').removeClass('under');   
   });
   $(".module .one").hover(function() {
     $("#one").addClass('red');
   });
 });
</script>

这是标记：

<div id="viewport">
  <div id="one">FIRST ONE CONTENT</div><!-- end #one -->
  <div id="two">SECOND ONE CONTENT</div><!-- end #two -->
  <div id="three">THIRD ONE CONTENT</div><!-- end #three -->
  <div id="four">FOURTH ONE CONTENT</div><!-- end #four -->
</div><!-- end #viewport -->

    <div class="module span-1 one">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <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-1 two">
  <div class="inside">HOVER</div><!-- end .inside -->
    <h1>TITLE</h1>
    <div class="caption down">
      <p>Caption ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor ipsum lorem dolor</p>
    </div><!-- end .caption -->
</div><!-- end .module -->

中间较大的悬停功能用于模块将自己执行的一些花哨的翻转效果，但出于这些目的，我只想弄清楚为什么当另一个悬停时我不能将一个类添加到一个单独的元素。希望得到一些帮助/建议！

4

2 回答 2

0

$("#viewport #one").addClass('red');引用具有两个名称的控件？这应该是；

$(".viewport .one").addClass('red');?

编辑

我刚试过这个，它奏效了；

$(".viewport.one").addClass('red');

您需要删除两个类之间的空间。

于 2010-06-07T04:36:47.193 回答
0

你的意思是：

 $(".module.one").hover(function() {

如果两个类都在同一个 dom 元素上，则它们之间不应有空格。类之间的空格意味着第一个是父级，第二个是它的子级。

于 2010-06-07T05:03:49.590 回答