Rounded Corners Image Change on Hover
- by Sarfraz
Hello,
I created a rounded box/button and sliced its first corner, the middle bar (which repeats horizontally to adjust the width of the button text/content) and the last corner and used following markup:
<div id="left-corner"></div>
<div id="middle-bar">About Us</div>
<div id="right-corner"></div>
These divs have corresponding images from CSS and are floated left. Those three divs create a single rounded button wiht text About Us which is fine.
Problem:
I have also created similar three slices of hover images but I wonder how to apply hover to those buttons because if I use :hover with these hovered slices, then even hovering on corner images also creates hovering effect. One alternative is to use fixed width buttons and slice buttons completely but I do not want to do that.
