0

我想在用户悬停元素时显示一个 div。我希望当您将鼠标悬停在名为 distinct 的 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
    });
});
4

3 回答 3

1

尝试使用mouseoverandmouseleave代替：

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

你可以在这个小提琴中看到它的作用：http: //jsfiddle.net/svNpQ/3/

于 2012-08-11T19:49:21.423 回答
0

这很简单，只需在您的代码中使用：

 $('#distinguished').hover(function() { 
    $('.prod-desc').animate({"opacity": 1}); 
 });

这是示例：jsFiddle Demo

在您的情况下，您必须通过 id 引用元素，即'distinguished'。然后，您定义悬停动作并在函数内部指定哪个元素和要做什么，在您的情况下'.prod-desc' animate (change css property) to 1。

请记住将.prod-desc的初始 css 不透明度属性设置为低于1的值以查看差异。

于 2012-08-11T19:48:40.997 回答
0

定位您希望将事件处理程序附加到的元素，而不是具有淡入淡出效果的元素：

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

小提琴

于 2012-08-11T19:56:25.710 回答