0303-hover와 display:none

//

    <div class="nonebox">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates,
      nihil!
      <p class="none">나는 none이다.</p>
      Nisi nostrum harum delectus sed placeat alias sunt quo quia debitis iste,
      deleniti repellendus! Error?
    </div>

//

<style>
      div {
        border: 1px solid black;
        display: inline-block;
        width: 500px;
        height: 300px;
      }
      body .inline {
        width: 48px;
        height: 48px;
        background-color: tomato;
      }
      li {
        list-style: none;
        display: inline;
      }

      /* 
       li:hover {
        background-color:red;
      }
      */

      .nonebox .none {
        display: none;
      }

      /* .none:hover {
        display: block;
        background-color: aquamarine;
      } */

      .nonebox:hover .none {
        display: block;
        background-color: aquamarine;
      }
    </style>

 

이 css에서 

 

.none:hover {        display: block;       
background-color: aquamarine;      

 

 

에서 궁금증

자체요소:hover와 display:none에대해 ...

 

검색 : hover와 display:none관계

일반적으로 생각하면 그렇게 될 것 같지만, CSS의 작동 원리에 따라 실제로는 그렇게 작동되지 않는다.
'hover'는 마우스가 요소 위로 이동했을떄 작동하는 이벤트이다.
하지만 'display:none;'으로 설정된 요소는 렌더링 자체가 되지않아,
실질적으로 존재하지 않는것과 같다. 
따라서 마우스를 올려도 그 'hover'이벤트를 감지할 수 없다.

즉 'display;none;은 해당 요소를 완전히 보이지 않게 하여 마우스 이벤트도 받지 않는다. 

이문제를 해결하기 위해서는
1. 'visibility: hidden;'이나 'opacity: 0;' 등을 사용할 수 있습니다. 이러한 속성들은 요소를 보이지 않게 하지만, 요소는 여전히 렌더링되고 마우스 이벤트도 받을 수 있습니다.

2. 부모요소:hover .자식요소(해당요소)
- 부모요소에 :hover를 적용하면, 부모요소에 마우스를 올렸을 떄 해당 CSS규칙이 적용된다. 이떄 자식 요소의 display 속성을 변경하면, 부모 요소가 호버될떄 자식요소의 표시 방식도 변경된다.

그래서 아래처럼 해야한다.

.nonebox:hover .none { display: block; background-color: aquamarine; }