如何在CSS类中添加鼠标输入和鼠标离开效果

Question

我在CSS中有一个方框类。

.box { 
    margin: 5px; 
    padding: 5px; 
    display: inline-block; 
    width: 240px; 
    height: 290px!important; 
    background-color:#FDFEFE; 
    text-align: center; 
    vertical-align: top; 
    float: left; 
} 

我正在使用这样的HTML页面显示项目。

<div class='box'> 
    <ng-include src="'commonTemplate.html'"></ng-include> 
</div> 

如何添加鼠标输入和鼠标离开效果？

我想要什么时，当用户在框区域中输入鼠标将其bg颜色更改为一些xyz颜色和鼠标离开将bg颜色更改为原始颜色。

Answer 1

只需使用:hover伪类：

.box { 
    background-color: #FFF; 
    /* rest of styles */ 
} 
.box:hover { 
    background-color: #EEE; 
}