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

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

NS

를 제지하다

그런 다음 사이트 본문에 다음이 있습니다.
암호:


시작

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

# 봇1 {
테두리: 0 0 0 0;
패딩: 0;
텍스트 정렬: 가운데;
}
외부 및 내부 여백을 원하지 않는다고 말하면 텍스트를 중앙에 정렬하고 이제 이 코드를 계속 사용합니다.
암호:

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

# bot1 a: 호버 {
배경 이미지: url(bg_menu_2.jpg);
}
# bot1 대상: 포커스 {
배경 이미지: url(bg_menu_3.jpg);
}
그러나 우리가 깨닫는 것처럼 우리는 우리가 찾고 있던 효과를 얻기 위해 배경 이미지의 경로만 변경했습니다.

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








시작


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