jequry控制元素的子元素样式

在写网页遇到这样一个问题：
页面有若干列表项li，每个li里面包含一个a，想要在鼠标悬停在特定的li上时同时改变li的背景色和a的文字颜色。

如下图：

具体描述：
想要实现的样式是
1.鼠标悬停：li背景是orange，a的颜色是白色
2.鼠标移开：li背景是白色，a的颜色变成橘色

这个问题只使用CSS的hover无法解决，因为有两个元素li和a要分别设置hover时候的状态，当鼠标悬停在li与a之间的padding中时会出现li背景改变但是a颜色没变的情况，这样会使得a的颜色被li背景覆盖，为了避免，我们采用jequry。

使用jequry处理这个问题，有两个重要的点：
1.首先获取当前悬停的li的序号
2.查找到这个li对应的a

由于我根本没有正经学过js，都是边做项目边找资料自学成的，所以想了半天，很感谢博主T型人小付发的一篇关于“JQuery利用find查找子元素并修改其样式和属性”的文章，我学习了一下，最终解决了这个问题。

他的文章链接在这里：
http://t.csdn.cn/zkTp7

问题解决代码如下：

	$(".sec1 .pig .menu .left .first li").mouseover(function(){
        var num=$(this).index();
        var len=$(".sec1 .pig .menu .left .first li").length-1;
        let $container= $(".sec1 .pig .menu .left .first li").eq(num);
        let $a=$container.children("a");
        $container.css("background-color","orange");
        $a.css("color","#fff");
    })
    $(".sec1 .pig .menu .left .first li").mouseleave(function(){
        var num=$(this).index();
        var len=$(".sec1 .pig .menu .left .first li").length-1;
        let $container= $(".sec1 .pig .menu .left .first li").eq(num);
        let $a=$container.children("a");
        $container.css("background-color","#fff");
        $a.css("color","orange");
    })

标签：container,样式,menu,元素,li,sec1,jequry,pig,first
来源： https://blog.csdn.net/qq_48035645/article/details/123189068