CSS에서는 ":hover" 선택기를 사용하여 마우스 포인터가 떠 있는 요소를 선택한 다음 해당 요소의 스타일을 설정합니다. 구문 형식은 "element:hover{css style};"입니다. hover"는 스타일이 적용되도록 ":link" ” 및 “:visited”(있는 경우)에 있어야 합니다.
관련 권장사항: "Programming Tutorial"
:호버 선택기는 마우스 포인터가 떠 있는 요소를 선택하는 데 사용됩니다.
팁: :hover 선택기는 링크뿐만 아니라 모든 요소에 사용할 수 있습니다.
CSS 정의에서 스타일을 적용하려면 :hover를 :link 및 :visited(있는 경우) 뒤에 배치해야 합니다.
:link selector는 방문하지 않은 페이지를 가리키는 링크 스타일을 설정하고, :visited selector는 방문한 페이지에 대한 링크를 설정하는 데 사용되며 :active selector는 활성 링크에 사용됩니다.
css :hover 선택기 사용법
사용법 1:
즉, 마우스가 a 스타일 위에 있을 때 a의 배경색이 노란색으로 설정됩니다
a:hover
{
background-color:yellow;
}이것은 가장 일반적인 사용법은 a
사용법 2:
a를 사용하여 다른 블록의 스타일 제어:
a를 사용하여 a의 하위 요소 b 제어:
.a:hover .b {
background-color:blue;
}a를 사용하여 제어 요소 c의 형제(형제 요소):
.a:hover + .c {
color:red;
}a를 사용하여 a의 인근 요소 d를 제어합니다.
.a:hover ~ .d {
color:pink;
}요약:
1 자식 요소를 제어하려면 중간에 아무것도 추가하지 마세요. 2. '+'는 동일한 레벨 요소(형제 요소)를 제어합니다.
3. '~'는 주변 요소를 제어합니다.
예버튼을 사용하여 상자 위로 이동할 때. 버튼을 누르면 상자가 움직이지 않고 마우스가 멀어지는데 상자는 계속 움직입니다
바디 코드:
<body>
<div class="btn stop">stop</div>
<div class="animation"></div>
</body>css 스타일:
<style>
.animation {
width: 100px;
height: 100px;
background-color: pink;
margin: 100px auto;
animation: move 2s infinite alternate;
-webkit-animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translate(-100px, 0);
}
100% {
transform: translate(100px, 0);
}
}
.btn {
padding: 20px 50px;
background-color: pink;
color: white;
display: inline-block;
}
.stop:hover ~ .animation {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
</style>더 많은 관련 기사를 보려면
PHP 중국어 웹사이트위 내용은 CSS에서 hover를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!