鼠标点击移动移出事件处理疑问

Question

<ul> <li class="abo"><a href="/page/aboutus">关于我们<em></em></a></li>
<li class="ent"><a href="/page/enterprise">企业动态<em></em></a></li>
<li class="h-line"><span>|</span></li>
<li class="pro">
<a href="/page/product" class="hover">产品中心<em></em></a>
<div style="display: none;" class="sub">
<a href="/page/aboutus/partner_jamy" class="hover">JAMY链接</a>
<span class="sh-line">|</span>
<a href="/page/aboutus/partner_gou4u" class="hover">GO4U链接</a>
<span class="sh-line">|</span>
<a href="/page/aboutus/partner_korean" class="hover">韩国馆链接</a>
</div>
</li>
<li class="car"><a href="/page/careers">人才招聘<em></em></a></li>
<li class="coo"><a href="/page/cooperation">加盟合作<em></em></a></li>
<li class="con"><a href="/page/contactus">联系我们<em></em></a></li>
</ul>我想要的结果是当我移动到或点击li里的某个汉字的时候，这个li里的a加上hover属性，当我鼠标离开这个汉字的时候hover要消失（但是我点击汉字的话，鼠标离开就不用去掉a的hover属性），当我点击其他li里的,那个被点击的li下的a要添加hover属性，且其他li的a下的hover属性要去掉。 且当我将鼠标划过其他li的时候那个a也要加上hover 类，当划出去的时候，去掉这个hover，就是鼠标点击的时候就要加上hover如下是我写的jquery，请大家帮我修改一下(function($){
$(document).ready(function(){
/********product********************************************/
$('.pro').hover(f,h);
/***********************************************************/
$('.abo').click(c);
$('.ent').click(c);
$('.car').click(c);
$('.coo').click(c);
$('.con').click(c);
/***********************************************************/
});

})(jQuery);var f = function(){
$(this).find('div').show();
$(this).find('a').addClass('hover');
}var h = function(){
$(this).find('a').removeClass('hover');
}var c = function(){
$(this).find('a').addClass('hover');
$(this).find('a').siblings().removeClass('hover');
}

Answer 1

<ul>
<li class="abo"><a href="/page/aboutus">关于我们<em></em></a></li>
<li class="ent"><a href="/page/enterprise">企业动态<em></em></a></li>
<li class="h-line"><span>|</span></li>
<li class="pro">
<a href="/page/product" class="hover">产品中心<em></em></a>
</li>
<li class="car"><a href="/page/careers">人才招聘<em></em></a></li>
<li class="coo"><a href="/page/cooperation">加盟合作<em></em></a></li>
<li class="con"><a href="/page/contactus">联系我们<em></em></a></li>
</ul>我想要的结果是当我移动到或点击li里的某个汉字的时候，这个li里的a加上hover属性，当我鼠标离开这个汉字的时候hover要消失（但是我点击汉字的话，鼠标离开就不用去掉a的hover属性），当我点击其他li里的,那个被点击的li下的a要添加hover属性，且其他li的a下的hover属性要去掉。 且当我将鼠标划过其他li的时候那个a也要加上hover 类，当划出去的时候，去掉这个hover，就是鼠标点击的时候就要加上hover如下是我写的jquery，请大家帮我修改一下(function($){
$(document).ready(function(){
/********product********************************************/
$('.pro').hover(f,h);
/***********************************************************/
$('.abo').click(c);
$('.ent').click(c);
$('.car').click(c);
$('.coo').click(c);
$('.con').click(c);
/***********************************************************/
});})(jQuery);var f = function(){
$(this).find('div').show();
$(this).find('a').addClass('hover');
}var h = function(){
$(this).find('a').removeClass('hover');
}var c = function(){
$(this).find('a').addClass('hover');
$(this).find('a').siblings().removeClass('hover');
}

Answer 2

问题就是为什么我点击某个li的时候，这个li里的a加上了hover，但只是一瞬间。而不是一直是加上hover的状态。