Question

我正在使用输入文本，此输入文本在单击时会触发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认为这不会成为问题。

Answer 1

Input个元素不能包含伪元素。如果需要应用此效果，则需要使用其他DOM元素。

Answer 2

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

Answer 3

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

css悬停在此代码中不起作用

CSS

HTML

注释

3 个答案: