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.
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");
}
);
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>
</div>
And for your other forms just change the id 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>
</div>
