css hover is not working in this code

Question

I am using an input text, this input text is fired a datepicker() functionwhen it clicks.

I want to make a message when the user hover over this input text.

I tried this

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

When I hover over the input text. nothing happens

why please?

note

the input text is hidden when the page loads but then I make it appears using jquery in a button. but Idon't think that could make the problem.

TylerH · Accepted Answer · 2014-04-16 13:11:27Z

1

Input elements can't have pseudo elements. You'll need to use another DOM element if you need to apply this effect.

edited Apr 16, 2014 at 13:11

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Apr 16, 2014 at 13:06

Anon

2,87417 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3432257 Over a year ago

there should be a solution.

TylerH Over a year ago

@user3432257 there probably is, but it's not Anon's responsibility to find it, necessarily. He answered your question "why" accurately.

user3432257 Over a year ago

@TylerH yes I know. and I hope someone to give me another solution to that.

enapupe Over a year ago

wrap your input in a div or p and use the wrapper's ::pseudo

Anon Over a year ago

you can wrap the necessary elements in divs and using JS for transfer the desired attributes

|

Bhushan wagh · Accepted Answer · 2014-04-16 13:23:05Z

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>

answered Apr 16, 2014 at 13:23

Bhushan wagh

3072 silver badges14 bronze badges

Comments

Bhushan wagh · Accepted Answer · 2014-04-18 07:32:02Z

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>

answered Apr 18, 2014 at 7:32

Bhushan wagh

3072 silver badges14 bronze badges

Collectives™ on Stack Overflow

css hover is not working in this code

css

html

note

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

css

html

note

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related