블로그 a 태그 hover 효과 적용 (transition 적용)

적용 전 모습

상단 카테고리의 hover 효과는 부드러워져서 좋았으나,게시글과 사이드바의 카테고리도 통일성을 줘야 한다는 판단이 들었다. transition을 주고, 뿐만 아니라 카테고리는 x축으로 움직이는 효과도 넣을 것이다.

---

기존 코드

a, a:link {text-decoration:none; color:#555;}
a:visited {text-decoration:none;}

/* hover 효과 - 밑줄 생성, 및 색상 변경 */
a:hover, a:focus {
	text-decoration:underline; 
	color: #FEB802;
}

a:active {text-decoration:none;}
/* ------------------------- a 태그 끝 ------------------------- */

.sidebar .category ul li a {
	color: #555;
}

/* 사이드바 카테고리 hover 효과 - 밑줄 생성 및 x축 이동 */
.sidebar .category ul li a:hover {
	color: #FEB802;
}
/* ------------------------- 사이드바 카테고리 끝 ------------------------- */

/* hover 효과 - 밑줄 생성 */
.cover-thumbnail-2 ul li a {
	display: block;
	text-decoration: none;
}

.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
	text-decoration: underline;
}
/* ------------------------- 썸네일-2 끝 ------------------------- */

- 홈페이지의 썸네일의 클래스명은 .cover-thumbnail-2로 되어있다.

- 게시글 제목은 .cover-thumbnail-2 ul li a span.title로 되어있다. 

(css 파일은 .cover-thumbnail-2 ul li a:hover .title 이렇게 되어있다.)

- a 태그 전체에 hover 효과가 밑줄과 색상변경이 적용되어 있었다. 그래서 썸네일과 카테고리 밑줄 효과가 없어서 당황했었다.

---

변경 후 코드

.sidebar .category ul li a {
	color: #555;
    transition: all 0.15s ease; /*추가-------------- */
}

/* 사이드바 카테고리 hover 효과 - 밑줄 생성 및 x축 이동 */
.sidebar .category ul li a:hover {
	color: #FEB802;
    margin-left: 0.5rem; /*추가-------------- */
}
/* ------------------------- 사이드바 카테고리 끝 ------------------------- */

/* hover 효과 - 밑줄 생성 */
.cover-thumbnail-2 ul li a {
	display: block;
	text-decoration: none;
    transition: all 0.15s ease; /*추가-------------- */
}

.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
	text-decoration: underline;
}
/* ------------------------- 썸네일-2 끝 ------------------------- */

 

---

변경 후 모습

---

후기

- 기존 코드가 컬러가 겹치는 부분들이 발견되어서 코드들을 정리를 싹 해야하는데.. 엄두가 나지 않는다. 일단 차차 수정하면서 코드를 다 이해했다 싶을 때 시간나면 해야겟다.

- margin-left를 통해 카테고리에 이동하는 효과를 주는 방식은 진짜 쉽다!

- transition을 주었을 때 렉이 걸리듯 버벅이는 부분은 랜더링 관련해서 공부해서 나중에 수정을 해야겠다.