Question

我有两个divs，在悬停span class=fg上增长并更改不透明度，span class=bg缩小，当您mouseout时，它会返回到原始状态。

我的问题分为两部分：

1：当鼠标悬停在第一个div上时，第二个div会发生相同的动作。

2：悬停不限于div，但只要鼠标在页面上移动就会发生。

HTML：

<div id="wrap">
  <h2>Subtitle</h2>
    <p>
      <span class="bg">Lorem Ipsum has been the</span> 
      <a href="#"><span class="fg"> industry’s standard</span></a> 
      <span class="bg">dummy text ever</span> 
      <span class="fg">since the 1500s,</span>
      span class="bg">when an unknown printer took a galley of type and</span> 
   </p>
</div>

<div id="wrap" class="">
  <h2>Stuff #2</h2>
     <p>
       <span class="bg">Lorem Ipsum has been the</span> 
       <span class="fg"> industry’s standard</span>
       <span class="bg">dummy text ever</span> 
       <span class="fg">since the 1500s,</span>
       <span class="bg">when an unknown printer took a galley of type</span> 
    </p>
</div>

JavaScript的：

<script type="text/javascript">
$(document).ready(function() {

  $("#wrap").parent().hover (function () {      
  $("span.fg").animate({"opacity": 1, fontSize: '14px'}, 300);
  $("span.bg").animate({fontSize: '7px'}, 300);
 },
  function () {   
  $("span.fg").animate({"opacity": .5, fontSize: '12px'}, 100); 
  $("span.bg").animate({fontSize: '12px'}, 100);}   
 ); 
});

CSS：

body  {background: #000;color: #FFF;font-family: Helvetica, sans-serif;}
p     {font-size:12px;}
#wrap { width: 300px;
    height: 150px;
    cursor: pointer;
    margin: 30px auto;  
    overflow:hidden;
       }
a     {text-decoration:none; color:inherit;}
.bg   {color:#999; opacity: 0.4;}
.fg   {color:#999; opacity: 0.4;}

Answer 1

id必须是唯一的，将#wrap更改为.wrap。同样在您的选择器中，您需要为其提供上下文元素的上下文，否则它将以该类为目标。您可以通过传递this或使用find()

来实现此目的

$(".wrap").parent().hover(function() {
    $("span.fg", this).animate({
        "opacity": 1,
        fontSize: '14px'
    }, 300);
    $("span.bg", this).animate({
        fontSize: '7px'
    }, 300);
}, function() {
    $("span.fg",this).animate({
        "opacity": .5,
        fontSize: '12px'
    }, 100);
    $("span.bg",this).animate({
        fontSize: '12px'
    }, 100);
});

这也假设父级是<div>而不是共享父级<div>（例如，它们不是嵌套在同一父级中）

<强> Example on jsfiddle

Answer 2

不要对2个元素使用相同的ID

$（“＃wrap”）。parent（） - 是父项，你必须使用$（“＃wrap”）元素

Answer 3

要在jQuery中按顺序制作动画，您应该将第二个动画函数编写为第一个动画的回调。

这些动画是平行的（它们都是同时开始的）

$('#first').animate({'left':'50px'});
$('#second').animate({'left':'100px'});

但是在这里，第二个动画在第一个动画完成时开始：

$('#first').animate({'left':'50px'}, function(){
    $('#second').animate({'left':'100px'});
});

Jquery目标/悬停问题

3 个答案: