当我将鼠标悬停在div上时，我希望它的背景从黑色变为白色，而链接的文本从白色变为黑色

Question

我的div的背景是黑色的，链接的文字是白色的。

#menu {
 background-color:black;
 width:20%;
 float:left;
}

实际的div。

<div id="menu"><a href="http://menu.com">Menu</a>

我怎样才能这样做，当我将鼠标悬停在它上面时，链接文字会变黑并且div的背景会变黑？

Answer 1

Use :hover pseudo class

#menu:hover a {
color: #000;
}

#menu:hover  {
background-color: #fff;
}

Answer 2

这是您想要的输出吗？

<div id="menu"><a href="http://menu.com">Menu</a></div>

#menu {
 background-color:black;
 width:20%;
 float:left;
}
a{
    color: white;
}
#menu:hover
{
    background-color: white;
}
#menu:hover a
{
    color: black;
}