FlexSlider is a jQuery based javascript carousel/image slider. It’s pretty fancy looking. The default behavior of this plugin is to show the left and right arrows on hover:
A client of mine requested to change this default behavior on their ecommerce site so that the arrows would always be visible. The fix is simpler than you might expect. Here is my pure CSS solution. At the time of writing this also works on the FlexSlider demo site:
.flexslider .flex-direction-nav .flex-next {
right: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}
.flexslider .flex-direction-nav .flex-prev {
left: 5px; /* adjust offset to match the hover style */
opacity: .8; /* adjust opacity to match the hover style */
}