3 개의 그림이있는 CSS 슬라이딩 도어, 호버 효과 문제

호버 효과에 문제가 있습니다.3 개의 그림이있는 CSS 슬라이딩 도어, 호버 효과 문제

<li class"menuButton facorits> 
<div class="menuButtonLeft></div> 
<div class="menuButtonMiddle> 
    <div class="favotisIcon"></div> 
</div> 
<div class="menuButtonRight"></div> 
</li> 


.menuButton:hover > div { 
    background-position: right -40px; 
    cursor: pointer; 
    } 

    .menuButtonLeft{ 
     background: url("left.png") no-repeat scroll 0px 0px transparent; 
     float: left; 
     width: 5px; 
     height: 100%; 
    } 

    .menuButtonMiddle{ 
     background: url("Middle.png") no-repeat scroll -5px 0px transparent; 
     float: left; 
    } 

    .menuButtonRight{ 
     background: url("right.png") no-repeat scroll -224px 0 transparent; 
     float: left; 
     width: 5px; 
     height: 100%; 
    }

3 개의 이미지가있는 슬라이딩 도어 CSS를 사용하고 있습니다. 문제는 내가 배경 위치를 설정할 때 각 그림이 같은 xy 위치에서 시작하는 것처럼 보입니다 ... 모든 그림이 스프라이트에 있습니다 (원본, 마우스 오버, 활성 상태)

설정 만 가능합니까? 하나의 "선택기"에있는 모든 3 장의 사진에서 Y 값을 뺍니까?

예 :이 같은

http://jsfiddle.net/k4RjV/16/ 뭔가를해야만. 단추 위로 마우스를 가져 가면 x 및 y 좌표가 왼쪽 및 오른쪽 그림에 잘못되었음을 알 수 있습니다.

출처

2012-03-06 Plexus81

.menuButtonLeft, .menuButtonMiddle 및 .menuButtonRight에 할당 한 CSS를 확인하는 것이 도움이 될 수 있습니다 –

호버의 이미지와 스타일도 표시해야합니다. 가장 좋은 방법은 사이트 또는 jsfiddle을 사용하여 온라인으로 보여주는 것입니다. – RoToRa

http://jsfiddle.net/k4RjV/16/ 이렇게해야합니다. 버튼 위로 마우스를 가져 가면 x y 좌표가 잘못되었음을 알 수 있습니다. – Plexus81

나는 당신이하고 싶은 것을 충분히 이해하고 있는지 잘 모르겠습니다.

동일한 선택기로 개체에 다른 값을 설정할 수 없으며 가장 최근의 개체는 이전 개체를 대체합니다.

편집 : 원하는대로 하시겠습니까?

li div { 
    background-position-y: 10px; 
}

출처

2012-03-06 08:59:01

그게 바로 제가 한 일입니다. IE8에서는 작동하지만 FF에서는 작동하지 않습니다. 이유가 무엇입니까? – Plexus81

'background-position-y'는 아직 널리 지원되지 않는 매우 새로운 속성입니다. – RoToRa

IE8에서는 작동하지만 파이어 폭스에서는 작동하지 않는 것은 이상하다. –

당신은 각각 다른 수평 위치를 가지고 있기 때문에, 별도로 각 div에 대한 새로운 배경 위치를 설정해야하며 수직 혼자 위치를 설정할 수 없습니다 :

.menuButton:hover .menuButtonLeft { 
    background-position: 0px -29px; 
} 

.menuButton:hover .menuButtonMiddle { 
    background-position: -5px -29px; 
} 

.menuButton:hover .menuButtonRight { 
    background-position: -130.8px -29px; 
}

NB : 모두 특별한 이유를 정수가 아닌 px 값에 대해? 기술적으로 잘못된 것은 아니지만 일반적으로 의미가 없습니다.

출처

2012-03-06 14:15:58 RoToRa

그 정수가 아닌 px에 대해서는 유감 스럽지만 firebug를 사용하여 코드를 복사합니다. :) – Plexus81

모든 div에서 호버링을 사용하면 해당 부분 (이미지) 만 전체 버튼이 아니라 호버 효과를 얻게됩니다. – Plexus81

@Plexus : 제 코드를보십시오. ': hover'는 여전히'.menuButton' 전체에 정의되어 있습니다. – RoToRa

3 개의 그림이있는 CSS 슬라이딩 도어, 호버 효과 문제

답변

관련 문제