Question

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

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

Answer 2

这很容易，只需在代码中使用：

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

以下是示例：jsFiddle Demo

在您的情况下，您必须通过id引用元素，即'distinguished'。然后你定义在你指定哪个元素和做什么的函数内悬停和操作的动作，在你的情况下'。prod-desc' animate（改变css属性）到 1 < / em>的

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

Answer 3

将要附加事件处理程序的元素定位到，而不是具有淡化效果的元素：

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

FIDDLE

悬停时的不透明度变化不起作用

3 个答案: