Div css hover animation not working when div is in always visible extender.

Question

0.00/5 (No votes)

See more:

Div css hover animation not working when div is in always visible extender.

I am developing a web page i want to show some animated effect on mouse hover of div and my div is under alwys visible extender.
I am using css class for div as mentioned below

CSS

.divLeftClass
       {
           background-color: transparent;
           position: absolute;
       }

       .divLeftClass:hover
       {
           background-color: #FF2400;
           position: absolute;
       }

It is not working there. and when i tried using it on simple page it working correctly.
Hope i will get the right answer.

Posted 4-Jun-14 18:29pm

HARSHADGCHAVAN

Add a Solution

Comments

Sergey Alexandrovich Kryukov 5-Jun-14 0:41am

That sounds strange. Is it possible to develop a very short, simplified to the absolute minimum complete code sample still manifesting this problem? CSS along won't show this problem.
—SA

HARSHADGCHAVAN 5-Jun-14 5:08am

Thanks. it is working now.

Sergey Alexandrovich Kryukov 5-Jun-14 12:23pm

Great. Congratulations!
Good luck, call again.
—SA

DamithSL 5-Jun-14 0:46am

use http://jsfiddle.net/[^] and reproduce the issue as SA commented.

[no name] 13-Jun-14 8:01am

Hi,

please visit the link for your query
http://www.w3schools.com/css/css3_transitions.asp

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

User 10695905 · Answer 1 · 2014-06-13T02:03:00

Hello,

please check below code for your question.

<div class="box"></div>

CSS

.box {
  width: 150px;
  height: 150px;
  background: red;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.box:hover {
  background-color: green;
  cursor: pointer;
}

**HardikPatel.SE** · Answer 2 · 2014-06-13T02:48:00

Solution 2

See the demo with your code...

http://jsfiddle.net/hardik4now/cPw86/[^]

Posted 13-Jun-14 2:48am

HardikPatel.SE