CSS에서 롤오버 1이있는 버튼 예제

롤오버 1 CSS
이 예에서는 다음과 같이 작동하는 3 개의 이미지가 있어야합니다.
휴식

의 위에

를 제지하다

그런 다음 사이트 본문에
암호:


처음

따라서 모든 버튼에 대해 CSS를 사용해야하는 경우 다음 코드로 시작합니다.
암호:

# bot1 {
경계: 000;
패딩: 0;
텍스트 정렬: 가운데;
}
바깥 쪽과 안쪽 여백을 원하지 않는다고 말하면 텍스트를 중앙에 정렬합니다. 이제 다음 코드를 계속합니다.
암호:

# bot1 ~ {
배경 이미지: URL (bg_menu_1.jpg);
배경 위치: 중앙 상단;
높이: 30px;
너비: 100px;
디스플레이: 블록;
색상: # 990000;
텍스트 장식: 없음;
padding-top: 5px;
배경 반복: 반복 없음;
글꼴 두께: 굵게;
}
그가 거의 모든 일을하는 사람이라는 것을 한 줄씩 보자
배경 이미지: URL (bg_menu_1.jpg);
이를 통해 배경 이미지를 원한다고 말하고이 경로를
배경 위치: 중앙 상단;
이를 통해 배경 이미지의 위치가 중앙에 있고 위쪽에 있음을 나타냅니다.
배경 반복: 반복 없음;
배경이 패턴 인 것처럼 반복되지 않도록합니다.
높이: 30px;
너비: 100;
높이는 30, 너비는 배경 이미지의 크기 인 100px입니다.
디스플레이: 블록;
그래서 그것은 우리가 전에 넣은 조치로 상자를 생성하고 존중합니다.
색상: # 990000
이것으로 우리는 상자 안에있는 텍스트에만 색상을 부여합니다.
텍스트 장식: 없음;
링크 아래에있는 선을 피하는 것입니다.
padding-top: 5px;
그래서 링크의 윗부분에 5px의 공간을 절약하고이를 통해 박스의 중앙으로 위치를 낮 춥니 다.
글꼴 두께: 굵게;
글자를 굵게 만듭니다.
그런 다음 "hover"및 "focus"가상 요소에 대한 클래스를 추가하면됩니다.
암호:

# bot1 a: hover {
배경 이미지: url (bg_menu_2.jpg);
}
# bot1 to: focus {
배경 이미지: url (bg_menu_3.jpg);
}
그러나 우리가 알고 있듯이, 우리는 우리가 찾고 있던 효과를 얻기 위해 배경 이미지의 경로 만 변경했습니다.

우리의 코드 CSS의 롤오버 예 아래에 표시 :
암호:








처음


이미지를 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장하면이 페이지에서 이미지를 다운로드 할 수 있습니다.