before 가상선택자에 hover 사용
관련링크
http://CSS
94회 연결
본문
안녕하세요~ 제목 그대로 before에 css로 hover태그 사용하려는데 안돼서
사용하는 법이 있을까요? 구조는 span::before에 &:hover태그 사용하려 합니다.
답변 2
예를 들어 다음과 같이 해 볼 수 있을 것 같습니다.
<style>
.parent:hover span::before {
/* 부모가 hover될 때 span::before에 스타일을 적용합니다. */
color: red;
/* 다른 스타일을 여기에 추가할 수 있습니다. */
}
.parent {
/* 부모 요소에 다른 스타일을 정의할 수 있습니다. */
cursor: pointer;
}
span::before {
content: "★";
/* 가상 요소에 내용을 추가합니다. */
}
</style>
<div class="parent">
<span></span>
<!-- 부모 요소에 hover하면 span::before에 스타일이 적용됩니다. -->
</div>
상황에 따라서는 JavaScript를 사용하여 특정 동작에 따라 스타일을 변경하는 것이 더 적합할 수도 있을 것으로 생각합니다.
JavaScript를 사용하여 hover 이벤트에 대응하는 방법
<style>
span::before {
content: "★";
/* 초기 스타일 설정 */
color: black;
}
</style>
</head>
<body>
<div class="parent" onmouseover="hoverEffect()" onmouseout="resetEffect()">
<span id="star"></span>
<!-- 이벤트가 발생할 때 호출될 함수를 지정합니다. -->
</div>
<script>
function hoverEffect() {
document.getElementById("star").style.color = "red";
// hover 이벤트가 발생할 때 스타일 변경
}
function resetEffect() {
document.getElementById("star").style.color = "black";
// hover 이벤트가 끝날 때 원래 스타일로 되돌림
}
</script>
span::before {}
span:hover::before {}
답변을 작성하시기 전에 로그인 해주세요.
