๋ชฉ์ฐจ
๋ง์ฐ์ค๊ฐ ์ฌ๋ผ๊ฐ์ ๋ ๋ณํ๋ฅผ ์ฃผ๋ ๊ฐ์ํด๋์ค์ ๋ํด์ ์์๋ณด์
hover
aํ๊ทธ๋ก hover๋ฅผ ํ์ฉํด๋ณด์๋ค.
๋ค์ด๊ฐ๊ธฐ์ ์
aํ๊ทธ ๊ด๋ จ ์์๋ ๊ฒ
1. href ์์ฑ์ ๋น์๋๋ฉด jQuery๊ฐ ์๋ํ์ง ์๋๋ค.
-> #none์ ๋ฃ์ด์ฃผ์!
2. body์ ์์ ์์ฑ์ ์ ์ฉ๋ฐ์ง ์๋๋ค.
์ฌ์ฉ๋ฒ
์ ํ์:hover
์์ฒ๋ผ ์ ํ์ ๋ค์ ๊ฐ์ํด๋์ค๋ฅผ ์ ์ด์ฃผ๋ฉด ๋๋๋ฐ
์ ํ์์ ๊ฐ์ํด๋์ค ์ฌ์ด์ ๋์ด์ฐ๊ธฐ๊ฐ ์์ผ๋ฉด ์๋๋ค!
์์1
<a href="#none">๊ณต์ง์ฌํญ</a>
<a href="#none">Q&A</a>
<a href="#none">์ปค๋ฎค๋ํฐ</a>
body {
background-color: #fff;
color: #333;
font-size: 15px;
}
a {
color: #333;
text-decoration: none;
font-weight: 700;
transition: 0.3s;
}
a:hover {
color: dodgerblue;
text-decoration: underline;
}
์์ ๊ฒฐ๊ณผ๊ฐ ๋์๋ค.
hover๋ ํด๋น ์ ํ์์ ๋ง์ฐ์ค ์ปค์๊ฐ ์ฌ๋ผ๊ฐ์ ๋
์ ์ฉ์ด ๋๋ค.
aํ๊ทธ์ transition์ด๋ผ๋ ์์ฑ์ ์ ์ฉํ๋๋ฐ
์ด๋ ๋ณํ์ด ๋ ๋๊น์ง ๊ฑธ๋ฆฌ๋ ์๊ฐ์ ์กฐ์ ํ๋ค.
์์ ์ฝ๋์ ๊ฐ์ด hover๊ฐ ๋์ง ์์ ์ํ์ ์ ์ฉ์ ํ๋ฉด
์ปค์๋ฅผ ์ฌ๋ฆฌ์ง ์์์ ๋๋ ์ฒ์ฒํ ๋ณํ์ด ๋๋ ํจ๊ณผ๋ฅผ ๋ผ ์ ์๋ค.
์์2
<div class="parent">
<div class="box"></div>
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: rgb(0, 66, 133);
border-radius: 50%;
width: 25px;
height: 25px;
transition: 1s;
}
.box:hover {
background-color: rgb(185, 215, 245);
border-radius: 0;
width: 100%;
height: 100%;
์ด๋ฒ์๋ ์ ๋ฒ์ ๋ค๋ฃจ์๋
'์์์์๋ฅผ ๋ถ๋ชจ์์์ ์ ๊ฐ์ด๋ฐ์ ๋ฐฐ์นํ๊ธฐ'์
hover์ transition์ ์ด์ฉํด์ ๋ณํ์ ํด๋ณด์๋ค.
๋ค์๊ณผ ๊ฐ์ด ์์, ํฌ๊ธฐ ๋ฑ์ ๋ณํ์ํฌ ์ ์๋ค.
'๐ | WEB DEV > HTML CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
CSS ๊ฐ์ํด๋์ค (2)_์์ ๊ฐ์ํด๋์ค[1] (nth-child, nth-of-type) (0) | 2022.01.07 |
---|---|
CSS ๊ฐ์ํด๋์ค (1)-2_๋ง์ฐ์ค ์ค๋ฒ ํจ๊ณผ(hover, transition) ์ถ๊ฐ! (0) | 2022.01.07 |
CSS ํฌ์ง์ (3)_์ํ๋ ์์น์ ๋ฑ ๋ฐฐ์นํ๊ธฐ! (0) | 2022.01.06 |
CSS ํฌ์ง์ (2)_์๋์ผ๋ก ์ ๊ฐ์ด๋ฐ ๋ฐฐ์น? (0) | 2022.01.06 |
CSS ํฌ์ง์ (1)_๋ถ๋ชจ์์ ์์์์ (0) | 2022.01.05 |
๋๊ธ