CSS-hover не работает в этом коде

0

Я использую текст ввода, этот входной текст запускается функцией datepicker(), когда он нажимает.

Я хочу сделать сообщение, когда пользователь наведет над этим текстом ввода.

Я попробовал это

CSS

#CldrFrom:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(messageHint);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

#CldrFrom:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

HTML

<input type="text" id="CldrFrom" placeholder="From" style="width:15%" messageHint="From" />

Когда я наводил текст ввода. Ничего не произошло

почему пожалуйста?

заметка

входной текст скрыт, когда загружается страница, но затем я создаю его, используя jquery кнопкой. но Idon't думаю, что это может сделать проблему.

Теги:
hover

3 ответа

1
Лучший ответ

Элементы Input не могут иметь псевдоэлементы. Вам нужно будет использовать другой элемент DOM, если вам нужно применить этот эффект.

Поделиться
  • 0
    должно быть решение.
  • 1
    @ user3432257, вероятно, есть, но Anon не обязан найти его, обязательно. Он ответил на ваш вопрос «почему» точно.
Показать ещё 5 комментариев
0 
<!DOCTYPE html>
<html>
<head>
<style>
.change{
background-color:#0ff}
.change:hover
{
background-color:#ccc;
}
</style>
</head>
<body>
<a class="change" href="#">Example</a>
</body>
</html>
Поделиться
0 
<!DOCTYPE html>
<html>
<head>
<style>
a:hover
{
background-color:#f00;
}
</style>
</head>

<body>

<a href="http://www.wikipedia.org">Hover effect</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

</body>
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню