스프 라이트에서 호버 영역을 만드는 방법?

이 코드는 두 개의 링크 된 영역 (호버링하기위한 것임)을 만들고 페이지의 상단 50px, 그 다음 하단 50px에 만듭니다. 따라서 마우스를 세로로 움직이면 두 호버를 치고 img은 옆으로 이동합니다.스프 라이트에서 호버 영역을 만드는 방법?

<html> 
<head> 
<style type="text/css"> 
a {display:block; left:0; height:50px; width:300px;} 
a#a1{top:50;} 
a#a2{top:100;} 
a img {position: absolute; top:0; left:0; width:300px;} 
a#a1 img:hover {left: 50px;} 
a#a2 img:hover {left: 100px;} 
</style> 
</head> 

<body> 
<a id="a1" /><a id="a2" /><img src="smiley.gif" /> 
</body> 
</html>

배경 이미지 또는 이미지 맵을 다시 배치하여이 작업을 수행하는 것이 좋습니다.

내 링크가 이미지의 부분 이상에서만 발생하도록 링크 (img 포함)의 크기를 다시 조정하려면 어떻게해야합니까?

출처

2011-03-02 johny why

가깝습니까? http://jsfiddle.net/thirtydot/FdxZ5/ 나는 당신이 원하는 것을 이해하지 못한다. 그래서 나는 추측했다. – thirtydot

img가 하나의 태그 중첩되어 있지 않기 때문에 img 요소는 a#a1 img:hover 또는 a#a2 img:hover으로 선택되지 않습니다. 다른 것을 위해, 당신이 바라는 것은 당신이 이미지 그 자체가 아닌 다른 요소 위에 마우스를 올려 놓고 이미지를 옮기는 것입니다.하지만 이것은 제 지식만으로는 CSS에서 할 수있는 것이 아닙니다. 이러한 종류의 기능을 사용하려면 javaScript를 사용하고 싶을 것입니다.

출처

2011-03-02 03:26:48 Muhd

태그의 배경에 스프라이트 이미지를 제공하는 것이 좋습니다. 예 :

.read { 
     background: url('../../img/home/home-assets.png')no-repeat 0 0; 
    } 
.read:hover { 
     background: url('../../img/home/home-assets.png')no-repeat 0 -50px; 
    }

css에서 배경 위치를 정의해야합니다. 자세한 내용은 다음을 참조하십시오. http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial, http://css-tricks.com/css-sprites/

출처

2011-03-02 04:26:58 sandeep

스프 라이트에서 호버 영역을 만드는 방법?

답변

관련 문제