CODEWITHSUNDEEP
csscss-transitions
Pavan Kumar
Pavan Kumar

Reputation: 1686

Mouseover 2 colors with css

Menu item default background-color is white. Mouse hover color is blue

My question is -

If we hold on the mouse hover on the menu item. first need to show blue color later 1 or 2 sec the color should change to some other color yellow.

Is it possible with css Transitions or any idea with CSS?

Upvotes: 2

Views: 2226

Answers (3)

Christofer Vilander
Christofer Vilander

Reputation: 18042

You can achieve this with CSS3 animations (works in modern browsers). Here's an example which changes the color of the button from grey to blue and then yellow.

Hope that helps!

Demo - jsFiddle

HTML

<div class="button"></div>

CSS

.button {
    width: 150px;
    height: 50px;
    background-color: #e3e3e3;
    border: 1px solid #000000;
}

.button:hover {
     -webkit-animation: color 1.0s forwards;
        -moz-animation: color 1.0s forwards;
          -o-animation: color 1.0s forwards;
}

@-webkit-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}

@-moz-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}

@-o-keyframes color {
      0%   { background-color: #0000ff; }
      50%  { background-color: #0000ff; }
      100% { background-color: #ffff00; }
}

Upvotes: 1

Afshin
Afshin

Reputation: 4215

Try this maybe help

HTML

<div class="test"><div></div></div>​​​​​​​​​​​​​​​​

CSS

​.test{
    width:100px;
    height:100px;
    background-color:#0ff;  
   -webkit-transition:background-color 1s ease-in; 
    -moz-transition:background-color 1s ease-in; 
    -o-transition:background-color 1s ease-in; 
    transition:background-color 1s ease-in; 
}
.test div{
    width:100px;
    height:100px;
    -webkit-transition:background-color 3s ease-in;
     -moz-transition:background-color 3s ease-in;
     -o-transition:background-color 3s ease-in;
     transition:background-color 3s ease-in;
}
.test:hover{
   background-color:#f00;
}

.test div:hover{
   background-color:green;
}

​jsFiddle

Upvotes: 3

Appyze Apps
Appyze Apps

Reputation: 98

I think this might be what you are looking for. http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it

Honestly, I have no idea why you need such a link, it will just make your website seem like it was made by a complete beginner, because it is very distracting. There are much nicer animations and plugins out there, especially if you use jQuery. Check this out for inspiration: http://bestofjquery.com/

Upvotes: 0

Related Questions