I've implemented a hover effect on a button where another div container expands from a width of 0 to 150px when the button is hovered over.
//hidden element
.twitter-options-wrapper {
width: 0;
position: absolute;
overflow: hidden;
top: -58px;
right: 100%;
-webkit-transition: width 250ms ease-in-out;
-moz-transition: width 250ms ease-in-out;
-o-transition: width 250ms ease-in-out;
-ms-transition: width 250ms ease-in-out;
transition: width 250ms ease-in-out;
}
For the hover effect, I'm utilizing Sass for nesting as shown below:
.btn-twitter-options:hover {
.twitter-options-wrapper {
width: 150px;
}
}
This implementation works flawlessly across all platforms except for IE9 - 10. It's puzzling because I have another button with a hover effect that works perfectly fine, albeit expanding from 30 - 40px on hover.
If anyone has any ideas or hacks specifically for IE 9 or 10 compatibility, please share them. Thank you!