잡동사니에도 사랑을

[21.09.17] exam10(05_cssPositioning) - 숨겨져 있는 단어 마우스 올려 보이게 하기(<span> 태그 두 번) 본문

JAVA_EE/CSS

[21.09.17] exam10(05_cssPositioning) - 숨겨져 있는 단어 마우스 올려 보이게 하기(<span> 태그 두 번)

luvforjunk 2021. 9. 17. 19:06
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

.item span {

        visibility: hidden;

}

.item:hover span{

        visibility: visible;

        color: red;

}

</style>

</head>

<body>

        <h3>다음 빈 곳에 숨은 단어?</h3>

        <hr>

        <ul>

               <li>I (<span class="item"><span>love</span></span>) you.

               <li>CSS is Cascading

                       (<span class="item"><span>Style</span></span>) Sheet.

               <li>응답하라 (<span class="item"><span>1988</span></span>).  

        </ul>

</body>

</html>

 

<!--

[문제] () 괄호 안에 마우스를 올리면 답이 빨간색으로 나타나게 하시오

 -->

 

 

결과창

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.17] practice05(css) - id속성, class속성 활용  (0) 2021.09.17
[21.09.17] exam11(05_cssPositioning) - 박스 안 내용 확인(hidden, visible, scroll, auto 활용)  (0) 2021.09.17
[21.09.17] exam09(05_cssPositioning) - 이미지 겹쳐서 배치(z-index 활용)  (0) 2021.09.17
[21.09.17] exam08(05_cssPositioning) - 화면을 기준(fixed)으로 자리 배치  (0) 2021.09.17
[21.09.17] exam07(05_cssPositioning) - 각기 다른 위치에 글씨 넣기(display, position, border 설정)  (0) 2021.09.17
'JAVA_EE/CSS' Related Articles more