Показать скрытый класс css при зависании

У меня есть несколько полей формы, каждый вход и метка обернуты внутри div следующим образом:

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

класс подсказки изначально скрыт как display:none.

Как я могу отобразить скрытый класс подсказок при наведении курсора в любом месте поля класса. Спасибо.

Ответ 1

В CSS вы можете сделать это следующим образом:

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

Изменить: Как сказал Карл, это не будет работать в Internet Explorer 6. Однако вы можете использовать JavaScript (в этом примере с помощью jQuery):

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

Ответ 2

Этот параметр будет работать в IE 4 и более поздних версиях.

<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>

И для ваших других форм просто измените id hint2, hint3 и т.д.

<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>