둥근 모서리 이미지 변경 (호버시)

Question

나는 둥근 상자/버튼을 만들고 첫 번째 모서리, 가운데 막대 (단추 텍스트/내용의 너비를 조정하기 위해 가로로 반복 함)와 마지막 모서리를 자르고 다음 마크 업을 사용합니다 :

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

이러한 div에는 CSS의 해당 이미지가 있으며 왼쪽으로 떠 있습니다. 그 세 divs 하나의 둥근 된 단추와 텍스트를 만들 회사 소개 괜찮습니다.

문제 :

나는 또한 호버 이미지의 3 개 조각과 유사한 만든하지만 난 후도 또한 생성 코너의 이미지를 유혹, 조각이 함께 :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> 

그런 다음 포장 사업부에 호버 변화를 구현할 수 :

#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> 요소로 묶습니다 (의미 론적 HTML을 신경 쓰는 경우 div 대신 span을 사용하십시오).

<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 */ } 

편집 : 때문에

: 단지 IE6에 <a> 요소에서 사용할 수있는 의사 선택기를 가져 우리가 사용해야하는 이유, 그건.