Question

请查看此链接http://dncminneapolis2012.com/new2

如果单击“两个”，它将滑动到第二页，您会在左侧看到4个框。如果将鼠标悬停在第一个图像上，它会很好地淡化到另一个图像。

我的问题是为什么不是为所有的盒子做这件事？

我的HTML看起来像这样

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_1_box">
  <a href="#"><img src="images/resourceful_one.png" id="rec_1" /></a>
  <div>
    <a href="#"><img src="images/resourceful_one_hover.png" id="rec_1_hover" /></a>
  </div>
</div>

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_2_box">
  <a href="#"><img src="images/resourceful_one.png" id="rec_2" /></a>
  <div>
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_2_hover" /></a>
  </div>
</div>

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_3_box">
  <a href="#"><img src="images/resourceful_one.png" id="rec_3" /></a>
  <div>
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_3_hover" /></a>
  </div>
</div>

<div class="facts" style="width: 472px; height: 130px; position: relative;" id="rec_4_box">
  <a href="#"><img src="images/resourceful_one.png" id="rec_4" /></a>
  <div>
    <a href="#"><img src="images/resourceful_one_hover.png" style="display:none;" id="rec_4_hover" /></a>
  </div>
</div>

我的jQuery看起来像这样

//find the div.facts elements and hook the hover event
$('div.facts').hover(function() {
  // on hover, find the element we want to fade up
  var fade = $('> div', this);

  // if the element is currently being animated (to a fadeOut)...
  if(fade.is(':animated')) {
    // ... take it's current opacity back to 1
    fade.stop().fadeTo(250,1);
  } else {
    // fade in quickly
    fade.fadeIn(250);
  }
}, function() {
  // on hovering out, fade the element out
  var fade = $('> div', this);
  if(fade.is(':animated')) {
    fade.stop().fadeTo(3000,0);
  } else {
    //fade away slowly
    fade.fadeOut(250);
  }
});

Answer 1

显示div，但图像本身设置为display：none。

为什么这个jquery脚本只针对1个元素？

1 个答案: