当我悬停 "a" 时，我的 "id" 也会悬停

Question

我希望我的文本和图像在其中一个悬停时同时变为白色。

当li a是:hover时，#btnicon如何获得:hover？

li a {  
    transition: .7s ease-out;
    color: #9d9d9d;
    text-decoration: none;
    display: block;
    padding: 0 20px;
    text-align: center;
    line-height: 60px;
    font-size:20px;
}

li a:hover{ 
    transition: .7s ease-out;
    color: #FFFFFF
}

#btnicon{
    width:15px;
    height:15px;
    margin-right: 5px;
    transition: .7s ease-out;
}

#btnicon:hover{
    transition: .7s ease-out;
    -webkit-filter: brightness(200%);
}

    <li><a href="index.html"><img id="btnicon"src="http://s11.postimg.org/bqc94ncoj/home.png">Home</a></li>

Answer 1

因为图像在里面 a 你可以这样做：

li a:hover #btnicon {
    transition: .7s ease-out;
    -webkit-filter: brightness(200%);
}

当我悬停 "a" 时，我的 "id" 也会悬停

When I hover "a" my "id" gain hover too

html

css

hover