Javascript ulli嵌套类jquery hover

我试图将鼠标悬停效果添加到一个有嵌套类的列表中，但到目前为止，即使花了这么多小时也没有运气

HTML:

您可以在www.modcansolutions.ca/#pricing上查看此实况

任何快速的帮助都将不胜感激

非常感谢,

~Dipak G.

你的答案

jQuery（文档）.ready（函数（）{
jQuery（“.pricing”）.hover（函数（）{
jQuery（this.addClass（“main”）；
},
函数（）{
jQuery（this.removeClass（“main”）；
}
);
});

或者您可以选中
您正在添加一个类
main
并删除一个类
normal
？为什么？你提供的链接不起作用。请创建一个JSFIDLE。我建议使用，以便更好地操纵DOM。另外，在css文件中签出并添加主类和普通类css…现在该文件已丢失，链接仍不起作用…请不要浪费时间检查此项…如果您得到答案，可能您需要类似的内容，然后投票支持答案。单击向上箭头。请这样做。你的网站没有打开。谢谢@MaulikP。“这就是我要找的东西。”迪帕克。我的答案和他的答案是一样的。请检查下面答案中我的JSFIDLE链接。@Prashant你的答案和Maulik的答案不一样。我同意您的代码在JSFIDLE中工作得很好，但Maulik的代码更好，它用悬停的类MAIN替换了类NORMAL。无论如何，非常感谢您的帮助和努力。@Prashant如何在鼠标退出时保持默认（第一个选项卡）不变？如果检查JSFIDLE，当您将鼠标悬停在第一个选项卡上时，它将丢失默认背景，并且所有3个选项卡看起来都一样。默认选项卡：。将鼠标移出第一个（默认）选项卡后的选项卡：
<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>

<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>

.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%;
}

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

        });