마우스 오버 강조하는 방법(with not)

not이 뭐냐면 가상 클래스 중 하나인데, 얘 빼고 다를 의미한다. 아니 그런데 저걸로 강조가 되나요? 그럼요.

 

생각해보자. 어떤 것을 강조하고 싶을때는 강조하고 싶은 객체가 눈에 잘 띄도록 하는 방법도 있지만 강조하고 싶은 객체 '빼고' 나머지가 눈에 안 띄게 하는 방법도 있다. 오늘은 not 서브클래스와 함께 후자를 해볼거다.

---

See the Pen Untitled by koreanraichu (@koreanraichu) on CodePen.

코드가 실행되면 블러처리가 돼서 흐릿해진 카드들을 볼 수 있는데, 이 카드들 중 아무 카드에나 마우스를 한번 가져가서 올려보자. 마우스 오버 된 카드가 뾰로롱하고 선명하게 드러날것이다.

 

.card:not(:hover) {
  opacity: 0.5;
  filter: blur(5px);
}

비결은 여기에 있다. 저 카드들은 전부 클래스 이름이 카드인데, 카드중에서도 마우스 오버가 되지 않은 카드들은 전부 투명도를 0.5로 조절하고 블러 처리까지 해달라는 얘기. 저렇게 하면 마우스 커서가 올라가지 않은 카드들은 흐릿하게 보인다.

 

이런 식으로 말이다.

 

See the Pen Hover not Hover by koreanraichu (@koreanraichu) on CodePen.

이번에도 블러처리가 된 카드에 마우스를 올려보니... 오잉? 색과 크기가 바꼈다?

 

.card:not(:hover) {
  width: 180px;
  height: 180px;
  margin: 20px;
  filter: blur(3px);
  background-color: #1e1e27;
}

이게 not hover에 붙은 속성이다.

 

.card {
  width: 220px;
  height: 220px;
  background-color: #df0139;
  color: #e2e2e2;
  text-align: center;
  border-radius: 10px;
  transition: 0.2s;
}

그리고 이게 원래 카드에 붙어있는 속성이다. not hover와 배경색, 크기가 다른데 이게 원래 설정된 크기이다. 

 

근데 마진은 왜 붙였냐고요? 마진을 안 붙이니까 저게 가운데로 안가요… ㅡㅡ 아니 플렉스 주면서 저스티파이 얼라인 다 센터로 줬는데 뭐가 불만이냐고 대체.

 

See the Pen Hover not hover 3 by koreanraichu (@koreanraichu) on CodePen.

물론 not만 줘서 부족하다 싶을 때는 적당히 마우스 오버했을 때도 강조해주면 된다.

 

 

.card:hover {
  transform: scale(1.1);
}

위 코드에서는 마우스 오버를 했을 때 크기를 1.1배로 늘려달라는 게 하나 있었고,

.card:not(:hover) {
  width: 80px;
  height: 200px;
  box-shadow: 5px 5px 5px #cccccc;
  background-color: #aaaaaa;
}

.card:not(:hover) > h2, .card:not(:hover) > p, .card:not(:hover) > i {
  display: none;
}

그 다음 마우스 오버가 되지 않은 카드는 가로 길이를 줄이고 내용을 보여주지 않았다.

 

not을 쓰고 안 쓰고에 정답이 있는 건 아니다. 단지 아는만큼 세상의 해상도가 넓어진다고 하잖은가? not을 알고 있다면 과도하게 집중하고 있는 객체에 강조하지 않고 집중하지 않는 객체를 적당히 보이지 않게 하는 방법도 생각해볼 수 있다는 얘기. 그럼 이걸 응용해서 이미지 갤러리를 하나 만들어보자.