설정 높이에 배경의 폭 : 호버 요소는

Question

나는 현재이 코드

#navlogo { 
    background: url(img/logo.png); 
    background-size: 100px; 
    display: block; 
    height: 98px; 
    width: 98px; 
    border-radius: 49px; 
} 

을하고 난

#navlogo:hover { 
    background:url(img/logoblog.png); 
    display: block; 
    height: 98px; /* this doesn't work */ 
    width: 98px; /* this doesn't work */ 
} 

목 원본 이미지는 150 × 150이 축소되어이 코드를 추가 할 몇 가지 이유 특히 iPhone에서 98x98을 사용하는 것보다 낫습니다. 그러나 hover 요소의 배경 크기를 설정할 수 없습니다 .... 원래 크기 그대로 유지됩니다. 나는 그것이 background-size: 98px 98px;으로 행해질 수 있다는 것을 알고 있습니다. 그러나 이것 또한 IE8 이하와 호환되지 않으며, CSS3PIE는 배경 크기를 포함하지 않습니다. 어쨌든이 작업을 수행 할 것인가, 아니면 호버 그림의 크기를 조정해야합니까?

Answer 1

배경 크기를 정의 된 100px에서 포함하도록 변경하십시오. 마우스 오버시 div 크기를 변경하면 해당 시나리오에서 백그라운드 크기가 변경됩니다.

EG :

#navlogo { 
background: url(img/logo.png); 
background-size: **contain**; 
display: block; 
height: 100px; 
width: 100px; 
border-radius: 49px; 
} 

#navlogo:hover { 
background:url(img/logoblog.png); 
display: block; 
height: 98px;    /*this doesn't work*/ 
width: 98px;    /*this doesn't work*/ 
} 

나는 그 있으리라 믿고있어 당신이 호버 스타일에 "작동하지 않습니다"시 지정하는 속성으로,이 예제에 대한거야 재설정하는거야 정상 상태의 스타일링에있는 것과 동일한 값. 그것들이 완전히 똑같은 것으로 주어지면 아무것도 변하지 않을 것입니다.

편집

logoblog 이미지가 배경 크기의 속성을 설정, 참으로 크다면뿐만 아니라이 문제를 해결해야한다 '포함'.