Question

I want to show a div when a user hovers the element. I want that when you hover over div named distinguished the div class prod-desc changes it’s opacity to 1.

Here’s the 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>

Here’s the jQuery:

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

Answer 1

It’s easy, just use in your code:

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

Here is the example: jsFiddle Demo

In your case you must refer to the element by id, which is ‘distinguished’. Then you define the action which is hover and inside of the function you specify which element and what to do, in your case ‘.prod-desc’ animate (change css property) to 1.

Remember to set initial css opacity property of .prod-desc to something lower than 1 to see the difference.