Some error on simple javascript attribute change

Question

Where is my error? Nothing happens on mouse on:

HTML

    <div id="spettacoli_div">
      <img class="spettacoli" src="grafica/spettacoli_di_sala.png" alt="spettacoli di sala" onmouseover="document.getElementById('spettacoli_di_sala_on').style.display = 'block';" onmouseout="document.getElementById('spettacoli_di_sala_on').style.display = 'hidden';"> 
     <div>
    <div id="spettacoli_on_div"> 
     <img class="spettacoli_on" id="spettacoli_di_sala_on" src="grafica/spettacoli_di_sala_on.png" alt="spettacoli di sala"> 
    </div>

CSS

.spettacoli_on {
    float: left;
    position:relative;
    padding-left: 4.4%;
    width:19.4%;
    height:auto;
    visibility: hidden;
}

Thank you very much.

Its visibility vs display.

me_digvijay
– me_digvijay

2013-10-31 11:38:16 +00:00
Commented Oct 31, 2013 at 11:38 — me_digvijay
– me_digvijay, Commented Oct 31, 2013 at 11:38

Niet the Dark Absol · Accepted Answer · 2013-10-31 11:36:32Z

2

You are hiding the element using the CSS visibility, but your JavaScript is toggling its display property.

answered Oct 31, 2013 at 11:36

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

darthmaim · Accepted Answer · 2013-10-31 11:37:49Z

0

hidden is not a valid value for the display-attribute. Set display:none or use visibility.

answered Oct 31, 2013 at 11:37

darthmaim

5,1681 gold badge29 silver badges41 bronze badges

Comments

kundan Karn · Accepted Answer · 2013-10-31 11:42:44Z

0

use this code

.spettacoli_on {
             float: left;
             position: relative;
             padding-left: 4.4%;
             width: 19.4%;
             height: auto;
             display: none;
         }


<div id="spettacoli_div">
      <img class="spettacoli" src="grafica/spettacoli_di_sala.png" alt="spettacoli di sala" onmouseover="document.getElementById('spettacoli_di_sala_on').style.display = 'block';" onmouseout="document.getElementById('spettacoli_di_sala_on').style.display = 'none';"> 
     <div>
    <div id="spettacoli_on_div"> 
     <img class="spettacoli_on" id="spettacoli_di_sala_on" src="grafica/spettacoli_di_sala_on.png" alt="spettacoli di sala"> 
    </div>

answered Oct 31, 2013 at 11:42

kundan Karn

2241 silver badge8 bronze badges

Collectives™ on Stack Overflow

Some error on simple javascript attribute change

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related