반응형
1.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
form {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding: 20px;
}
form:hover input {
background-color: sienna;
}
</style>
</head>
<body>
<form>
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
</form>
</body>
</html>
form: 부모
input: 자식
부모의 상태(마우스 hover)에 따라 자식이 변하게 됨.
결과
input 박스에 마우스 오버하면
sienna 색으로 변한다.
2.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>The Nick Times</title>
<style>
body {
height: 1000vh;
margin: 50px;
}
form {
border: 1px solid salmon;
display: flex;
flex-direction: column;
padding: 20px;
}
form:hover input:focus {
background-color: sienna;
}
</style>
</head>
<body>
<form>
<input type="text" name="" id="" />
<input type="text" name="" id="" />
<input type="text" name="" id="" />
</form>
</body>
</html>
form이 hover가 된 상태에서
input이 focused로 바뀌게 됨.
결과
input이 focused 되었고 &
마우스가 form 위에 있으면 (hover)
sienna 색으로 변한다.
반응형
'2. CSS' 카테고리의 다른 글
| CSS selection (문구 드래그 시 색상 변경하기) (0) | 2024.11.30 |
|---|---|
| CSS ::placeholder (플레이스홀더 문구 색상 바꾸기) (0) | 2024.11.30 |
| CSS focus-within 태그 적용하기 (0) | 2024.11.30 |
| CSS visited, hover, focus 동시에 사용하기 (1) | 2024.11.30 |
| CSS visited 로 링크 색상 변경하기 (0) | 2024.11.30 |