Rounded Corners Image Change on Hover
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&g开发者_JS百科t;
<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.
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;
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.
精彩评论