Question

I have few form fields, each input and label is wrapped inside a div in following way:

<div class="field">
    <label for="name">Name:</label>
    <input type="text" class="input" name="name" />
    <p class="hint">Enter your name</p>
</div>

the hint class is initially hidden like display:none.

How can I display the hidden hint class on hover anywhere in class field.
Thanks.

Answer 1

In CSS you can do it the following way:

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

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

jQuery(".field").hover(
   function() {
      jQuery(this).find(".hint").css("display","block");
   },
   function() {
      jQuery(this).find(".hint").css("display","none");
   }
);