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

例如

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

鼠标停在a1上时，a2发生改变
怎么写啊
------解决方案--------------------

.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(' ');

}