我正在尝试将鼠标悬停效果添加到具有嵌套类的列表中,但即使在花了这么多时间之后也没有运气。
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>
...这里是我试图用于鼠标悬停的jquery
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%;
}
您可以访问www.modcansolutions.ca/#pricing
查看任何快速帮助将不胜感激。
非常感谢,
~Dipak G。
答案 0 :(得分:0)
你的回答
jQuery(document).ready(function() { jQuery(".pricing").hover(function () { jQuery(this).addClass("main"); }, function () { jQuery(this).removeClass("main"); } ); });
或者您可以查看jsfiddle
答案 1 :(得分:0)
jQuery(document).ready(function() {
jQuery(".pricing.pricing_three").hover(function() {
jQuery(this).addClass("main").removeClass("normal");
},
function() {
jQuery(this).removeClass("main");
});
});