CSS 전환 변환

겨자 로켓

마우스가 전체 텍스트 위에있을 때만 아이콘을 회전하는 방법이 있는지 묻고 싶습니다.

코드는 다음과 같습니다.

.text .icon {
  vertical-align: middle;
  font-size: 40px;
  
  transition: transform 0.5s;
}

.icon:hover {
  transform: rotate(360deg);
}

.text {
  margin: 0 auto;
  clear: both;
  font-size: 23px;
}
<p class="text">
  <span class="icon">i</span><a href="#" target="_blank">Text</a>
</p>

아이콘이 회전하지만 마우스를 자신 위에 올려 놓아야합니다.

감사

사미 쿠 모넨

.text:hover .icon선택기로 사용할 수 있으며 p 요소 위로 마우스를 가져 가면 회전합니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사