#myform fieldset{
display: inline-block; /* 하위 별점 이미지들이 있는 영역만 자리를 차지함.*/
direction: rtl; /* 이모지 순서 반전 */
border: 0; /* 필드셋 테두리 제거 */
}
#myform fieldset legend{
text-align: left;
}
#myform input[type=radio]{
display: none; /* 라디오박스 감춤 */
}
#myform label{
font-size: 3em; /* 이모지 크기 */
color: transparent; /* 기존 이모지 컬러 제거 */
text-shadow: 0 0 0 #f0f0f0; /* 새 이모지 색상 부여 */
}
#myform label:hover{
text-shadow: 0 0 0 #a00; /* 마우스 호버 */
}
#myform label:hover ~ label{
text-shadow: 0 0 0 #a00; /* 마우스 호버 뒤에오는 이모지들 */
}
#myform input[type=radio]:checked ~ label{
text-shadow: 0 0 0 #a00; /* 마우스 클릭 체크 */
}
CSS 만으로 자바스크립트 느낌을 내는 방법을 구글링을하다가 찾아서 따로 메모해둔다.. 구현을 할때 방법은 여러가지라는걸 또다시 느끼게 된다.
[폴더 정리]
'일기장 > 하루 정리' 카테고리의 다른 글
220322 [화] Pager 클래스 , AJAX로 게시판 형태 만들기 (0) | 2022.03.22 |
---|---|
220321 [월] Transaction Manager , REST (0) | 2022.03.21 |
220318 [금] Mybatis 환경설정 2 , JUnit (0) | 2022.03.18 |
220317 [목] Tiles (Template Page), Mybatis 환경설정 (2) | 2022.03.17 |
220316 [수] OT , @ModelAttribute , @SessionAttribute (0) | 2022.03.16 |