Как изменить цвет фона на прозрачный в событии onmouseout?

Question

Это мой код:

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif"    alt="Smiley" width="32" height="32"> 
<script> 
    function bigImg(x) { 
     x.style.backgroundColor = "red" 
    } 
    function normalImg(x) { 
     x.style.backgroundColor = "transperant" 
    } 
</script> 

Я хочу, чтобы цвет фона, чтобы вернуться к прозрачному после того, мыши из образа. Как я надел на него курсор, цвет фона меняется красным, я вынимаю его, а цвет фона становится прозрачным. Приведенный выше код работает, но только когда я наводил на него курсор, он меняет красный цвет, а затем, когда я вынимаю мышь, он по-прежнему остается одного цвета.

Answer 1

У вас есть опечатка.

Вместо:

x.style.backgroundColor="transperant" 

Оно должно быть:

x.style.backgroundColor="transparent"; 

Answer 2

Попробуйте это:

<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif"    alt="Smiley" width="32" height="32"> 

<script> 
    function bigImg(x) { 
     x.style.backgroundColor = "red" 
    } 
    function normalImg(x) { 
     x.style.opacity = 0.5 
    } 
</script> 

Ссылка на fiddle