jqueryu问题 鼠标移入和移出 去掉默认样式 切换样式

Question

<ul class="case-icon">
    <!--注：newcase.html是education页面-->
    <li>        
        <a href="newcase.html" class="com-icon yincang aa"><img src="../img/case/images/maozi-icon.png"/></a>
        <a href="newcase.html"  class="xianshi">EDUCATION</a>
    </li>
    <li>
        <a href="intel.html" class=  "com-icon xianshi" ><img src="../img/case/images/box-icon.png"/></a>
        <a href="intel.html" class="yincang aa"><span>INTELLIGENT</span></a>
    </li>
    <li>
        <a href="sharing.html" class="com-icon xianshi"><img src="../img/case/images/dainchi-icon.png"/></a>
        <a href="sharing.html" class="yincang aa"><span>WEARABLE </span></a>
    </li>
    <li> 
        <a href="wearable.html" class="com-icon xianshi"><img src="../img/case/images/qiu.icon.png"/></a>
        <a href="wearable.html" class="yincang aa"><span>SHARING</span>   </a>
    </li>
    <li>
        <!--casehome.html-->
        <a href="casehome.html" class="com-icon xianshi"><img src="../img/case/images/home.icon.png"/></a>
        <a href="casehome.html" class="yincang aa">SMART  HOME</a>
    </li>
</ul>

css代码

.yincang{
    display: none;
}

$('.case-icon li').hover(function(){                
//    $(this).children(".xianshi").eq(0).removeClass('yincang');
//    $(this).children(".aa").eq(0).addClass('yincang');

    $(this).children(".yincang").removeClass('yincang');
    $(this).children(".xianshi").addClass('yincang');
},function(){
//    $(this).children(".yincang").eq(0).removeClass('yincang');
//    $(this).children(".xianshi").eq(0).addClass('yincang');
                
    $(this).children(".aa").addClass('yincang');
    $(this).children(".xianshi").removeClass('yincang');
});

我想问下，我这个，怎么去掉第一个默认样式呢让他和其内容一样鼠标移入图片变文字、其他的变成图片？鼠标移出相反。

Answer 1

$('.case-icon li').hover(function(){                
  $(this).children().toggleClass('yincang xianshi');
  $(this).siblings().children()
    .eq(0).addClass('xianshi').removeClass('yincang')
    .next().addClass('yincang').removeClass('xianshi');
});

这种逻辑css足够了，不需要js

.case-icon li a:last-child,
.case-icon li:hover a:first-child{
  display: none;
}
.case-icon li:hover a:last-child{
  display: inline;
}