CSS 호버/슬라이더 변경

나는 아주 새내기이므로 너에게 단순한 것처럼 보인다면 나에게 간단하지 않기 때문에 참아 라!CSS 호버/슬라이더 변경

나는 건물중인 새로운 음식 축제 사이트에 대한 프레임 워크를 제공하는 멋진 template을 구입했습니다. 저는 여기 새로워서 스크린 샷을 게시 할 수 없으므로 템플릿을 수정 한 방법을 보여줄 수 없습니다! 우둔한!

아래의 기본 로고는 이미지를 오른쪽에서 왼쪽으로 슬라이드시키는 여러 개의 호버 버튼입니다. 마우스를 올리면 변경되지만 '슬라이드'하지 않는 마우스 오버 이미지로 바꾸고 싶습니다. this article에 나와 있습니다.

아무도 올바른 방향으로 나를 가리킬 수 있습니까?

출처

2013-01-15 Robert Conner

스크린 샷에 대한 링크를 게시 할 수 있습니까? – boz

당신이해야 할 일 로버트는 우리에게 아이콘 글꼴을 만들어 주며, 완벽한 색상 변경 효과를 허용하며, 모든 아이콘이 6-7 http 대신 하나의 글꼴 파일을 통해로드 될 수 있기 때문에 여러 아이콘/이미지를 사용하는 경우로드가 더 빠릅니다. 큰 이미지 요청. 아이콘 글꼴의 아이콘은 색상 호버 효과를 비롯한 여러 가지 방법으로 변경할 수 있습니다. 원하는 경우 데모를 만들 수 있으며 귀중한 자원을 제공 할 수 있습니다. –

단순히 CSS에 추가 :

ul#menu:hover li{ 
    background-image: url('yourImageUrl'); 
    background-repeat: no-repeat; 
    background-position: top center; 
}

결국 레이아웃에 따라 호버 이미지가 반투명하게 opacity을 사용하고 여백/패딩을 조정

DEMO : http://jsfiddle.net/ZSGDH/

출처

2013-01-15 13:24:28

나는 마침내 당신의 문제를 안다고 생각합니다. 그리고 실제로 우리가보고있는 "마우스가 움직이는 효과"는 실제로 javacript에 의해 트리거되고 이 아니라이 아닙니다. 추정 된 CSS3.

그리고 당신이 원하는 것을 얻으려면 먼저 CSS 규칙을 무시하고있는 자바 스크립트를 비활성화해야합니다. 그 위치는 "http://static.livedemo00.template-help.com/wt_39062/js/jquery.backgroundpos.js"

일단 js /가 비활성화되면 css3 트릭을 사용하여 쉽게 아이디어를 구현할 수 있습니다 당신이 연결되어 있습니다. 그것을 구현하는 방법에 대해 더 궁금해 할 수 있습니다. 그러나 당분간은 직접 해보고 싶다고 생각합니다.

출처

2013-01-15 23:58:30

CSS 호버/슬라이더 변경

답변

관련 문제