0

ユーザーが要素をホバーしたときにdivを表示したいと思います。識別されたdivクラスprod-descという名前のdivにカーソルを合わせると、不透明度が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

代わりにを使用してみてください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/

于 2012-08-11T19:49:21.423 に答える
0

簡単です。コードで使用するだけです。

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

次に例を示します。jsFiddleデモ

あなたの場合、あなたは「区別された」であるidによって要素を参照しなければなりません。次に、ホバーするアクションを定義し、関数内でどの要素と何を実行するかを指定します。この場合、「。prod-desc」は1にアニメーション化（cssプロパティを変更）します。

違いを確認するには、 .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 に答える