Rounded Corners Image Change on Hover

Question

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.

Answer 1

Wrap it with <a> element (use spans instead of divs if you care about semantic HTML).

<a href="#" class="button">
   <div id="left-corner"></div>
   <div id="middle-bar">About Us</div>
   <div id="right-corner"></div>
</a>

CSS:

.button:hover #left-corner { /* something here */ }
.button:hover #middle-bar{ /* something here */ }
.button:hover #right-corner { /* something here */ }

Edit:

Because :hover pseudo selector can be only used on <a> element on IE6, that's why we must use it.

Answer 2

Can you wrap those three divs in another div? Like:

<div id="button_wrapper">
    <div id="left-corner"></div>
    <div id="middle-bar">About Us</div>
    <div id="right-corner"></div>
</div>

You could then implement hover changes on the wrapping div:

#button_wrapper:hover #left-corner {}
#button_wrapper:hover #middle-bar {}
#button_wrapper:hover #right-corner {}

Alternatively, have you considered using border-radius. You won't get any love from IE, but it degrades nicely and is ridiculously easy to implement:

-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;