Javascript-форум - Появление рамки при наведении мышки на объект

Всем привет!
Хочу сделать страничку с описанием продукции, и когда мышка наводилась на определённый товар вокруг него появлялась рамка (border).
Сделал пока вот так:
index.html:

<div onMouseOver="selobj()" onMouseOut="outobj()" id="first">
<div onClick="summ(220,1)">
<span class="name"> Товар1 </span><br>
<img src="images/stul1.jpg" name="stul1">
</div> 
<form onChange="summ1(220)" name="count">
Ед. <input type="text" name="col1" size="3">
</form>
</div>

<div onMouseOver="selobj()" onMouseOut="outobj()" id="second">
<div onClick="summ(400,2);">
<span class="name">Товар2 </span> <br>
<img src="images/stul2.jpg" name="stul2">
</div>
<form onChange="summ1(400)" name="count2">
Ед. <input type="text" name="col2" size="3">
</form>
</div>

<div onMouseOver="selobj()" onMouseOut="outobj()" id="first">
<div onClick="summ(300,3)">
<span class="name"> Товар3 </span><br>
<img src="images/stul1.jpg" name="stul1">
</div> 
<form onChange="summ1(300)" name="count3">
Ед. <input type="text" name="col3" size="3">
</form>
</div>

<div onMouseOver="selobj()" onMouseOut="outobj()" id="second">
<div onClick="summ(400,4);">
<span class="name">Товар2 </span> <br>
<img src="images/stul2.jpg" name="stul2">
</div>
<form onChange="summ1(400)" name="count4">
Ед. <input type="text" name="col4" size="3">
</form>
</div>

И script.js:

function selobj() {
$("#first, #second").css("border", "2px solid red");
}
function outobj() {
$("#first, #second").css("border", "0px solid red");
}

В итоге получается какая-то фигня, рамка пояляется сразу на двух первых объектах, а на следующих двух ничего не появляется.
Как изображено на скриншоте:

Как сделать так чтобы выделялся только тот блок над которым находится мышка?

<div onMouseOver="*!*selobj(this)*/!*" onMouseOut="*!*outobj(this)*/!*" id="first"> <div onClick="summ(220,1)"> <span class="name"> Товар1 </span><br> <img src="images/stul1.jpg" name="stul1"> </div> <form onChange="summ1(220)" name="count"> Ед. <input type="text" name="col1" size="3"> </form> </div> <div onMouseOver="*!*selobj(this)*/!*" onMouseOut="*!*outobj(this)*/!*" id="second"> <div onClick="summ(400,2);"> <span class="name">Товар2 </span> <br> <img src="images/stul2.jpg" name="stul2"> </div> <form onChange="summ1(400)" name="count2"> Ед. <input type="text" name="col2" size="3"> </form> </div> <div onMouseOver="*!*selobj(this)*/!*" onMouseOut="*!*outobj(this)*/!*" id="third"> <div onClick="summ(300,3)"> <span class="name"> Товар3 </span><br> <img src="images/stul1.jpg" name="stul1"> </div> <form onChange="summ1(300)" name="count3"> Ед. <input type="text" name="col3" size="3"> </form> </div> <div onMouseOver="*!*selobj(this)*/!*" onMouseOut="*!*outobj(this)*/!*" id="fourth"> <div onClick="summ(400,4);"> <span class="name">Товар2 </span> <br> <img src="images/stul2.jpg" name="stul2"> </div> <form onChange="summ1(400)" name="count4"> Ед. <input type="text" name="col4" size="3"> </form> </div>

<!DOCTYPE html> <html> <head> <style type="text/css"> .box:hover { border: 1px solid red; } </style> <script type="text/javascript"> </script> </head> <body> <div class='box' id="first"> <div onClick="summ(220,1)"> <span class="name"> Товар1 </span><br> <img src="images/stul1.jpg" name="stul1"> </div> <form onChange="summ1(220)" name="count"> Ед. <input type="text" name="col1" size="3"> </form> </div> <div class='box' id="second"> <div onClick="summ(400,2);"> <span class="name">Товар2 </span> <br> <img src="images/stul2.jpg" name="stul2"> </div> <form onChange="summ1(400)" name="count2"> Ед. <input type="text" name="col2" size="3"> </form> </div> <div class='box' id="first1"> <div onClick="summ(300,3)"> <span class="name"> Товар3 </span><br> <img src="images/stul1.jpg" name="stul1"> </div> <form onChange="summ1(300)" name="count3"> Ед. <input type="text" name="col3" size="3"> </form> </div> <div class='box' id="second1"> <div onClick="summ(400,4);"> <span class="name">Товар2 </span> <br> <img src="images/stul2.jpg" name="stul2"> </div> <form onChange="summ1(400)" name="count4"> Ед. <input type="text" name="col4" size="3"> </form> </div> </body> </html>