Всем привет!
Хочу сделать страничку с описанием продукции, и когда мышка наводилась на определённый товар вокруг него появлялась рамка (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");
}
В итоге получается какая-то фигня, рамка пояляется сразу на двух первых объектах, а на следующих двух ничего не появляется.
Как изображено на скриншоте:
Как сделать так чтобы выделялся только тот блок над которым находится мышка?