[ACCEPTED]-Display hidden css class on hover-css

Accepted answer
Score: 18

In CSS you can do it the following way:

.hint { display: none; }
.field:hover .hint { display: block; }

Edit: As 4 Karl said, this will not work in Internet 3 Explorer 6. You can, however, resort to 2 JavaScript (in this example using jQuery) to 1 do that:

   function() {
   function() {
Score: 2

This option will work in IE 4 and later.

<div class="field" onmouseover="document.getElementById('hint').style.display='none';"  onmouseout="document.getElementById('hint').style.display='block';">
    <label for="name">Name:</label>
    <input type="text" class="input" name="name" />
    <p id="hint">Enter your name</p>

And 2 for your other forms just change the id 1 hint2, hint3, etc.

<div class="field" onmouseover="document.getElementById('hint2').style.display='none';"  onmouseout="document.getElementById('hint2').style.display='block';">
    <label for="name">Name:</label>
    <input type="text" class="input" name="name" />
    <p id="hint2">Enter your name</p>

More Related questions