- This topic is empty.
-
AuthorPosts
-
September 12, 2010 at 12:27 pm #30220ldjMember
I’m trying to apply a little animation to my navigation on my site using the following CSS:
nav a:hover:nth-child(odd)
{
-webkit-transform: rotate(-10deg) scale(2.5);
-moz-transform: rotate(-10deg) scale(2.5);
-o-transform: rotate(-10deg) scale(2.5);
}
nav a:hover:nth-child(even)
{
-webkit-transform: rotate(5deg) scale(2.2);
-moz-transform: rotate(5deg) scale(2.2);
-o-transform: rotate(5deg) scale(2.2);
}This is working fine in Opera and Firefox, but in the latest version of Chrome, hovering over the links does nothing. Is there any special syntax or additional code required for Webkit? Looking aroudn the web I can’t see anything wrong.
Thanks
September 12, 2010 at 7:14 pm #79987virtualParticipantYou mention Opera and Firefox which are targeted respectively by -o and -moz . Have you tried Safari, -webkit targets Safari and Chrome. Are you using position fixed, as there is a problem when using both together.
September 12, 2010 at 7:41 pm #79964Chris CoyierKeymasterI wonder if you gotta list the :nth-child first
nav a:nth-child(even):hover
Shoudn’t matter but this way feels more correct to me
September 13, 2010 at 12:17 pm #79921ldjMember@chriscoyier: Agreed. Reads better thats for sure. Makes no difference to the functionality/behaviour though.
@virtual: tried it in Safari – same thing, not working at all :(September 13, 2010 at 12:27 pm #79927ldjMemberI’ve set the position:relative explicitly which has also made no difference. Also added ‘background-color: blue;’ to the CSS which is happening in Chrome, so I know the hover event is firing in Chrome, making it even stranger!
September 13, 2010 at 3:23 pm #79905shagzdesignMembercan you post a link to the live code that way someone might see something you missed?
September 13, 2010 at 9:14 pm #79838Chris CoyierKeymasterOr a quick reduced test case in http://jsbin.com would be good.
September 23, 2010 at 12:25 pm #79194ldjMemberJust thought I’d update this. I solved it by adding display:block to nav:a elements. Seems Webkit won’t transform them otherwise.
Live & learn I guess!!! :(
October 30, 2011 at 1:09 am #89920gildeanMemberJust to give more info on people stumbling on to this thread:
Use display: inline-block for the transform: scale to work on chrome, firefox and opera and not to break the styling.
With inline-block you can use scale straight on text-links and have them work nicely with all modern browsers except IE.
A small example on one of my linux-project pages here: http://julkinen.salaliitto.com/ac100 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.