답변 2개
채택된 답변
+20 포인트
1년 전
예를 들어 다음과 같이 해 볼 수 있을 것 같습니다.
</p>
<p> <style>
.parent:hover span::before {
/* 부모가 hover될 때 span::before에 스타일을 적용합니다. */
color: red;
/* 다른 스타일을 여기에 추가할 수 있습니다. */
}</p>
<p> .parent {
/* 부모 요소에 다른 스타일을 정의할 수 있습니다. */
cursor: pointer;
}</p>
<p> span::before {
content: "★";
/* 가상 요소에 내용을 추가합니다. */
}
</style>
<div class="parent">
<span></span>
<!-- 부모 요소에 hover하면 span::before에 스타일이 적용됩니다. -->
</div>
</p>
<p>상황에 따라서는 JavaScript를 사용하여 특정 동작에 따라 스타일을 변경하는 것이 더 적합할 수도 있을 것으로 생각합니다.
JavaScript를 사용하여 hover 이벤트에 대응하는 방법
</p>
<p> <style>
span::before {
content: "★";
/* 초기 스타일 설정 */
color: black;
}
</style>
</head>
<body>
<div class="parent" onmouseover="hoverEffect()" onmouseout="resetEffect()">
<span id="star"></span>
<!-- 이벤트가 발생할 때 호출될 함수를 지정합니다. -->
</div></p>
<p> <script>
function hoverEffect() {
document.getElementById("star").style.color = "red";
// hover 이벤트가 발생할 때 스타일 변경
}</p>
<p> function resetEffect() {
document.getElementById("star").style.color = "black";
// hover 이벤트가 끝날 때 원래 스타일로 되돌림
}
</script>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인