html一个简单的问题
我想给一个样式加hover

例如

.a1
{
height:20px;
width:20px;
}
.a2
{
height:120px;
width:120px;
}

鼠标停在a1上时，a2发生改变
怎么写啊 HTML 鼠标 hover
[解决办法]

.a1{
    height:60px;
    width:60px;
    border:1px solid #000;
}
.a2{
    height:20px;
    border:1px solid #000;
    width:20px;
}

.a1:hover .a2{
    height:40px;
    width:40px;
}

a2要是在a1里面可以这么写，要是在外面的话只能写JS来解决了

var a1 = document.getElementById('a1')
var a2 = document.getElementById('a2')
a1.onmouseover = function(){
    a2.className += 'a1hover';
}
a1.onmouseout = function(){
    var clses = a2.className;
    clses = clses.split(' ');
    var len = clses.length;
    for(var i=0;i<len;i++){
        if(clses[i] && clses[i]=='a1hover'){
            clses.splice(i,1);
        }
    }
    a2.className = clses.join(' ');
}