Округлые углы Изменение изображения на поводке

Question

Я создал округлую коробку/кнопку и нарезал ее первый угол, средний план (который повторяется горизонтально, чтобы отрегулировать ширину текста/содержимого кнопки), и последний угол и используется следующая разметка:

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

Эти divs имеют соответствующие изображения из CSS и плавают влево. Эти три divs создают одну закругленную кнопку с текстом О нас, что хорошо.

Проблема:

Я также создал аналогичный три ломтика при наведении изображений, но мне интересно, как применить парить на эти кнопки, потому что, если я использую :hover с ними парил ломтики, а затем даже зависания на углу изображений также создает зависающий эффект. Один из вариантов заключается в том, чтобы использовать фиксированную ширину кнопок и кнопок среза, но я не хочу этого делать.

Answer 1

Можете ли вы обернуть эти три div в другом div? Как:

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

Затем можно осуществить изменения при наведении курсора мыши на оберточной DIV:

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

В качестве альтернативы, вы рассмотрели с помощью border-radius. Вы не будете получать любовь от IE, но он деградирует красиво и ridiculously easy to implement:

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

Answer 2

Оберните его с помощью элемента <a> (используйте интервалы вместо div, если вам нужен семантический 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:

Потому что: парить селектор псевдо может быть использован только на <a> элемент на IE6, поэтому мы должны использовать его.