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

Question

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

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

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

Проблема:

Я также создал аналогичные три среза изображений при наведении, но мне интересно, как применить наведение к этим кнопкам, потому что если я использую :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, но он приятно деградирует и просто невероятно прост в реализации

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

Answer 2

Оберните его элементом <a> (используйте span вместо 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:

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