css实现鼠标指向父级div的时候,子级div的内容变色

没有指向之前:

 

 

指向之后:

鼠标移到空白区域即可实现!

代码部分:

css:

 

讲解下代码 大致的思路就是抓取准确的节点:

父级元素(.article-list)进行hover然后接着自己的子级(article-list-title)再接子级下的节点(a)

.article-list:hover .article-list-title>a{
    color:#ffaa22;
}