ul li nested class jquery hover

Question

I am trying to add mouse hover effect to a list having nested classes but no luck so far even after spending so many hours.

HTML:

<div class="pricing-wrap">
 <ul class="pricing_main">
  <li class="pricing pricing_three main">
    <h2>Used Containers</h2>
    .....
  </li>
  <li class="pricing pricing_three normal">
    <h2>Used Containers</h2>
    .....
  </li>
  <li class="pricing pricing_three normal">
    <h2>Used Containers</h2>
    .....
  </li>
 </ul>
</div>

...and here is the jquery I am trying to use for mouse hover

JQUERY:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".pricing-wrap ul.pricing_main").hover(function () {
        jQuery(this).find('li.pricing_three').addClass("main");
      },
      function () {
        jQuery(this).find('li.pricing_three').removeClass("normal");
      }
    );
});
</script>

CSS:

.pricing-wrap{
    overflow:hidden;
    width:100%;
    margin:20px 0 30px 0;
    float:left;
}

.pricing_main{
    overflow:hidden;
    float:none;
    margin:0 0 0 0;
    width:100.5%;
    padding:7px 0;
    font-family:Arial, Helvetica, sans-serif !important;
}

li.pricing{
    padding:0;
    margin:20px 0 20px -1px;
    float:left;
    text-align:center !important;
    border:1px solid #ddd;
    position:relative;
}

li.main{
    margin:0 0 0 -1px;
    -moz-box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    box-shadow:  0 0 10px rgba(0, 0, 0, 0.2);
    z-index:1;
}

li.pricing:first-child{
    margin-left:0;
}

li.pricing ul li{ padding:8px 0; margin:0 35px; border-top:1px dotted #eee;}

li.pricing ul li:first-child{border-top:none;}

li.pricing h2{
    background:#ddd;
    padding:10px 0;
    margin:0;
    font-size:20px;
    border-bottom:1px solid #ddd;
    font-weight:bold;
}

li.main h2{
    background:#000;
    color:#fff;
    padding:21px 1px;
    margin:-1px -1px 0 -1px;
    border-bottom:none;
}

li.main{
    border-color:#ccc;
}

.plan-head{ background:#f9f9f9; padding:20px 0 15px 0; border-bottom:1px solid #eee;}

.plan-price{ font-size:25pt; font-weight:bold; letter-spacing:-2px; line-height:1;}

.plan-bottom{ background:#f9f9f9; padding:15px 0; border-bottom:1px solid #eee;}

li.main .plan-bottom{padding:35px 0;}

.plan-bottom{ background:#f9f9f9; padding:25px 0; border-top:1px solid #eee;}

.plan-bottom a{ font-weight:bold; padding:8px 15px; background:#000; color:#fff !important; font-size:14px; opacity:.9}

li.main .plan-bottom a{padding:13px 22px; opacity:1}

.plan-bottom a:hover,
li.main .plan-bottom a:hover{}

li.pricing_three{
    width:33%;
}

li.pricing_four{
    width:24.7%;
}

You can check this live at www.modcansolutions.ca/#pricing

Any quick help will be appreciated.

Many thanks,

~ Dipak G.

Answer 1

your answer

jQuery(document).ready(function() { jQuery(".pricing").hover(function () { jQuery(this).addClass("main"); }, function () { jQuery(this).removeClass("main"); } ); });

or you can check jsfiddle

Answer 2

        jQuery(document).ready(function() {
            jQuery(".pricing.pricing_three").hover(function() {
                jQuery(this).addClass("main").removeClass("normal");
            },
                    function() {
                        jQuery(this).removeClass("main");
                    });

        });