Question

我觉得这应该有效：

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

基本上我隐藏了“#viewport on load（#one is）的所有.children，然后当一个单独的元素悬停时，（在这种情况下是.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 -->

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

Answer 1

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

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

修改

我刚试过这个并且有效;

$（ “viewport.one。”）addClass（ '红'）;

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

Answer 2

你的意思是：

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

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

在悬停时交换单独div中的内容

2 个答案: