[CSS] hover 시 특정 요소 기능 작동되도록 CSS로 설정하기

FrontEnd를 개발하며 CSS에 대한 공부를 하기 시작하였다.

 

기능을 개발하던 중 마우스 오버 시 발생하는 이벤트를 javascript가 아닌 css로 구현하고자 하니, hover라는 방법을 이용하게 되었고 개발하던 중 난관을 만나게 되었다. 

그것은 hover시 특정요서의 투명도를 1로 설정하여 안보이던 글씨를 hover시 에만 보이게 하는 기능을 구현하고자 하나, hover시 이벤트 대상을 선택하는 방법을 알지 못하였다.

 

구글 검색을 통해 알아낸 결과는 다음과 같다.

 

내가 하고자 했던 기능은 이미지에 마우스 오버시 hover되며 해당 이미지를 어둡게하고 발급 가능이라는 글씨를 나타내고 싶었다. 따라서 이미지는 slick-slide 클래스 내의 photo 클래스 내의 nft-pic이라는 클래스로 선언하였고 보여주고자 하는 글씨는 div 태그에 top이라는 클래스로 지정하였다.

 

그렇게 작성한 코드는 아래와 같다.

.slick-slide .photo .nft-pic:hover{
  cursor: pointer;
  filter: brightness(30%);
}

.slick-slide .photo .nft-pic:hover ~ .top{
  opacity: 1;
}

.slick-slide .photo .top{
  opacity: 0;
  position: absolute;
  padding-left: 2.5%;
  bottom: 41%;
  z-index: 2;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

여기서 아래의 코드를 통해 hover되면 마우스 커서를 포인터로 변경하고 이미지를 어둡게할 수 있었으며

.slick-slide .photo .nft-pic:hover{
  cursor: pointer;
  filter: brightness(30%);
}

아래의 코드를 통해 글씨 위치를 지정하고 글씨를 투명하게 지정하였다.

.slick-slide .photo .top{
  opacity: 0;
  position: absolute;
  padding-left: 2.5%;
  bottom: 41%;
  z-index: 2;
  color: #fff;
  font-size: 26px;
  font-weight: 900;
}

그리고 가장 중요한 코드인 아래의 코드를 통해 마우스 hover시 글씨를 불투명하게 하여 눈에 보이게 할 수 있었다.

.slick-slide .photo .nft-pic:hover ~ .top{
  opacity: 1;
}

CSS에서 어떤 이벤트 발생시 어떤 태그에 대한 이벤트를 발생시키고 싶다면 ~ 라는 기호를 통해 작동시키면 된다는 것을 알게되었다!!

 

ejs 코드도 첨부한다!

<section class="slick slider">
	<div class="photo">
		<img alt="NFT List" class="nft-pic" src="/images/slick/reward1.png">
		<div class="top">발급 가능</div>
	</div>
</section>

마지막으로 아래는 완성된 결과 화면이다!