CSS headache (a:hover) with Chrome browser.

Question

My element is not working properly in Chrome (mouse hover over icons do not work). However, firefox displaying it fine.

http://i.stack.imgur.com/gpDHx.jpg

Codepen source http://codepen.io/anon/pen/lzkAb

I WOULD REALLY APPRECIATE ANY HELP GUYS! YOU WILL SAVE ME HOURS OF GOOGLING THANKS!

Answer 1

CSS transforms and transitions are needed to be prefixed with -webkit- in case of webkit browsers like safari and chrome.

Here check this PEN

.opentime .timelineopening li .roundbox:hover {
    -webkit-transform:scale(1.15) !Important;
    -webkit-transition: all 250ms ease-in-out 0s ! important;
    transform: scale(1.15) ! important;
    transition: all 250ms ease-in-out 0s ! important;
}
.opentime .timelineopening li .roundbox:hover .dayname {
    font-size: 0px;
    transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
}
.opentime .timelineopening li .roundbox:hover span.icon1 {
    opacity: 1;
    transition: all 300ms ease-in-out 0s;
    -webkit-transition: all 300ms ease-in-out 0s;
}

Answer 2

transform property doesn't work in chrome yet. You need to use -webkit-transform on your hovers in addition, like this:

.opentime .timelineopening li .roundbox:hover { 
   transform: scale(1.15) ! important;
  -webkit-transform: scale(1.15) ! important;
  transition: all 250ms ease-in-out 0s ! important; 
}

(actually, this snippet did the trick for me on your codepen).

Also, it is not recommended to have such a complex selector structure, perhaps simple .roundbox:hover would do?