I use CSS transitions fairly regularly and for some reason I cannot get them to work on a simple unordered list. I created a demo here: http://jsfiddle.net/79NhC/
On the list item, I have the following css:
#servicesBox li {
border-bottom:1px solid #eeeeee;
padding:10px 0 10px 10px;
webkit-transition: background 0.2s;
moz-transition: background 0.2s;
ms-transition: background 0.2s;
o-transition: background 0.2s;
transition: background 0.2s;
}
For some reason, when a user hovers over the list item, the background does not gracefully fade in. Any reason why? Thanks in advance
You need to put a - before all of your browser-specific transition declarations.
So, like this:
#servicesBox li
{
border-bottom:1px solid #eeeeee;
padding:10px 0 10px 10px;
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
-ms-transition: background 0.2s;
-o-transition: background 0.2s;
transition: background 0.2s;
}
Related
I've a h1 text that is very faded on a background. Once you roll over it / hover over the block that it is in, it slowly start to light up until it is completely white. This is great and just like I want it to be. Here's the problem. Once you leave the hover, the color goes back to being faded. I'd like for it to stay white as the whole point of having it faded is that it should not be in your sight until you are hovering past it.
TL:DR / When I hover a h1 it starts to light up, I want the new color to remain after you remove the hover.
The HTML I use
<h1 style="color: #fff;">Sammen flytter vi<br> de digitale grænser.</h1>
The CSS I use
.lovernemarketingtitle h1 {
font-size: 50px;
line-height: 54px;
font-weight: 900;
opacity: 0.5;
}
.lovernemarketingtitle:hover h1 {
opacity: 1;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-out;
-ms-transition: all 1s ease-out;
transition: all 1s ease-out;
}
SOLUTION BY PRAVEEN KUMAR
http://jsbin.com/dufarofoto/1/edit?html,css,output
Use transition-delay, but beware, improper use affects the hovered state as well.
a {text-decoration: none; display: inline-block; padding: 5px; border: 1px solid #ccc; border-radius: 3px; line-height: 1; color: #000; transition: all 0.5s linear 2s;}
a:hover {transition: all 0.5s linear 0s; background: #ccf;}
Hover Me<br />
Lights up immediately but goes back after 2 seconds.
ps: There's no opacity: 2.
I have created a button which transitions into a different colour when mouse hovers over.
I cannot figure out how to make the colour change back to its original when the mouse is no longer hovering.
I have tried many ways, which have not worked.
Is there another Psuedo-element which I could use? Any help would be really appreciated.
#cta-btn:hover {
background-color: #37A3BC;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Add this code to your original cta-btn:
#cta-btn {
background-color: (enter your original bg color) ;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
Here's the CSS I'm using and I've tested it against the latest browsers.
.team-member {
padding: 15px;
background: #fafafa;
min-height: 150px;
width: 100%;
transition: linear background .5s;
border-radius: 3px;
overflow: auto;
}
.team-member:hover {
background: #eee;
transition: linear background .5s;
}
Also, you should also add vendor specific css prefix. For ex)
{
-moz-transition: linear background .5s;
-o-transition: linear background .5s;
-webkit-transition: linear background .5s;
transition: linear background .5s;
}
I have a site (http://sheisbiddy.com/the-f-word/) where the Read More link jumps when you hover your mouse over it. It only started happening when I added padding to it to make it the same size as the box below. Here's the CSS:
a.more-link {display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition: color, background-color 0.1s linear; -webkit-transition: color, background-color 0.2s linear; -o-transition: color, background-color 0.1s linear;}
I'm using Safari if that makes a difference.
Well, when you hover, you're adding 10px of padding on the top and bottom that aren't there in the standard style. Try removing these elements from hover
padding-top:10px; padding-bottom:10px;
That, or you'll want to add this padding to your other style.
You want the padding to be a part of your un:hoverd selector. That way applying the padding only upon hovering doesn't add any size to the link.
a.more-link {padding 10px 0;}
Alternatively, since you're already using transitions you can add a padding transition to make the "jump" animated.
a.more-link { transition: padding 0.2s linear; }
Depending on how you want, you could add the padding to the base class like so :
https://jsfiddle.net/78s24fpw/
a.more-link { padding-top:10px; padding-bottom:10px;display:block; text-align: center; color:#e9bdd8; text-transform:uppercase; font-size:85%; position: relative; bottom: 5px;}
a.more-link:hover {background-color:white;padding-top:10px; padding-bottom:10px;transition: color, background-color 0.1s linear; -moz-transition:
So I have this button on my website that has grey background, red border, and red text, and I want it so that when you hover over it the background turns red, and text turns white, border doesn't change. What happens is when you take your mouse off the button the border color becomes white, and then once the transition is over it quickly goes back to red.
Usually I know this code should work, but I think since I'm using transition it doesn't. Here's the full CSS code:
#leftWebsiteTitle a:link{
display:block;
width:200px;
padding:7px 10px 7px 14px;
margin:37px;
font-family:graduate;
color:#C83434;
border:3px solid #C83434;
background:transparent;
text-decoration:none;
font-size:44px;
-webkit-transition: color 300ms, background 300ms;
-moz-transition: color 300ms, background 300ms;
-o-transition: color 300ms, background 300ms;
-ms-transition: color 300ms, background 300ms;
transition: color 300ms, background 300ms;
}
#leftWebsiteTitle a:visited{
color:#C83434;
text-decoration:none;
}
#leftWebsiteTitle a:hover{
color:#FFF;
border:3px solid #C83434;
background:#C83434;
text-decoration:none;
-webkit-transition: color 100ms, background 100ms;
-moz-transition: color 100ms, background 100ms;
-o-transition: color 100ms, background 100ms;
-ms-transition: color 100ms, background 100ms;
transition: color 100ms, background 100ms;
}
Any ideas why this doesn't work?
Thanks!
So I found the problem to be not in the code provided above. I had transition applied to the div that was containing that button, and that's what was interfering with this transition. Once I removed that it worked fine.
using the following set of rules and style declarations
.tableRow.even, .tableRowNS.even, .odd { background-color: #F2F2F2; }
.tableRow.odd, .tableRowNS.odd, .even { background-color: white; }
.tableRow:hover,.noProject:hover,
.tableRow.even:hover, .tableRowNS.even:hover, .odd:hover,
.tableRow.odd:hover, .tableRowNS.odd:hover, .even:hover {
background-color: #E8E8E8;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
}
the mouseover color is working, but its not transitioning. am I approaching this incorrectly?
is there a problem with setting transition properties on multiple selectors like this?
I forgot to add the firefox specific css3 transition property: -moz-transition.
after adding that, we have the following css. Now everything works fine.
.tableRow:hover,.noProject:hover,
.tableRow.even:hover, .tableRowNS.even:hover, .odd:hover,
.tableRow.odd:hover, .tableRowNS.odd:hover, .even:hover {
background-color: #E8E8E8;
transition: background-color .5s;
-webkit-transition: background-color .5s;
-o-transition: background-color .5s;
-moz-transition: background-color .5s;
}