javascript - 悬停时动画不透明度变化不起作用

Question

我想在用户将鼠标悬停在元素上时显示一个 div。我希望当您将鼠标悬停在名为 distinctive 的 div 上时，div 类 prod-desc 将其不透明度更改为 1。

请帮助我，谢谢你!

这是 HTML:

<section id="distinguished" class="four columns"> <a class="dist-img" href="#"  alt="" border="0" > <img src="images/e1.png" onClick="window.location='@Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"/> </a>
  <div class="descContent">
    <div class="distinguished-bar"> <a class="categoryMain" href="@Url.Action("Details", "Item", new { id = section["Id"], storeid = section["PortalId"], name = section["ProductTitle"] })'"></a> <a class="btAdd" href="#" title="ADD"><span class="iconAdd"></span>
      <p>ADD</p>
      </a> </div>
    <div class="infoContent">
      <div class="prod-desc ">
        <p>Category</p>
        <p>Title</p>
        <p>Description</p>
      </div>
      <div class="prod-price">
        <div>
          <p class="priceTitle">Precio</p>
          <span class="priceRegular">$300</span></div>
      </div>
      <div class="buttonsBox"> <a class="btAddLarge hom2" id="addToCart" href="/Cart/AddToCart">
        <p>@this.Message("Add")</p>
        </a> </div>
    </div>
  </div>
</section>

这是 jQuery:

$('.prod-desc').hover(function () {
    $('.prod-desc', this).stop().animate({
        "opacity": 1
    });
}, function () {
    $('.prod-desc', this).stop().animate({
        "opacity": 0
    });
});

Answer 1

尝试使用 mouseover和 mouseleave相反:

$('.prod_desc').mouseover(function() {
    $(this).stop().clearQueue().animate({
        "opacity": 1
});
$('.prod_desc').mouseleave(function() {
        $(this).stop().clearQueue().animate({
            "opacity": 0
        });
    });
});​

您可以在这个 fiddle 中看到它的实际效果:http://jsfiddle.net/svNpQ/3/