유용한 게시물에 대해 Mike와 Robertc에게 감사드립니다.

HTML에 두 개의 요소가 있고 :hover하나 이상의 요소를 변경하고 다른 스타일의 스타일 변경을 목표로하려면 두 요소가 부모, 자녀 또는 형제 자매와 직접 관련되어 있어야합니다. 즉, 두 요소는 다른 요소의 내부에 있어야하거나 동일한 더 큰 요소 내에 포함되어야합니다.

사용자가 내 사이트를 :hover통해 강조 표시된 용어를 읽을 때 브라우저 오른쪽의 상자에 정의를 표시하고 싶었습니다 . 따라서 ‘text’요소 안에 ‘definition’요소를 표시하고 싶지 않았습니다.

나는 거의 포기하고 방금 내 페이지에 자바 스크립트를 추가했지만 이것이 미래에 달려 있습니다! CSS와 HTML의 백 삭감을 참아서는 안되며 원하는 효과를 얻기 위해 요소를 어디에 배치해야하는지 알려줍니다! 결국 우리는 타협했습니다.

파일의 실제 HTML 요소가 서로 중첩되거나 단일 요소에 포함되어 있어야 유효한 :hover대상 position이되지만 css 속성을 사용하여 원하는 위치에 요소를 표시 할 수 있습니다. position : fixed를 사용 :hover하여 HTML 문서의 위치에 관계없이 사용자의 화면에 원하는 위치에 작업 대상을 배치했습니다 .

HTML :

<div id="explainBox" class="explainBox"> /*Common parent*/

  <a class="defP" id="light" href="http://en.wikipedia.or/wiki/Light">Light                            /*highlighted term in text*/
  </a> is as ubiquitous as it is mysterious. /*plain text*/

  <div id="definitions"> /*Container for :hover-displayed definitions*/
    <p class="def" id="light"> /*example definition entry*/ Light:
      <br/>Short Answer: The type of energy you see
    </p>
  </div>

</div>

CSS :

/*read: "when user hovers over #light somewhere inside #explainBox
    set display to inline-block for #light directly inside of #definitions.*/

#explainBox #light:hover~#definitions>#light {
  display: inline-block;
}

.def {
  display: none;
}

#definitions {
  background-color: black;
  position: fixed;
  /*position attribute*/
  top: 5em;
  /*position attribute*/
  right: 2em;
  /*position attribute*/
  width: 20em;
  height: 30em;
  border: 1px solid orange;
  border-radius: 12px;
  padding: 10px;
}

이 예제에서 :hover요소 의 명령 대상은 또는 안에 #explainBox있어야합니다 . #definitions에 할당 된 위치 속성 은 기술적으로 HTML 문서 내에서 원하지 않는 위치에 있더라도 원하는 위치 (외부 )에 표시되도록합니다.#explainBox#explainBox#explainBox

#id두 개 이상의 HTML 요소에 동일한 형식을 사용하는 것은 잘못된 형식으로 간주됩니다 . 그러나,이 경우, #light고유 한 #id요소 에서의 각각의 위치로 인해 인스턴스가 독립적으로 기술 될 수있다 . id #light이 경우 반복하지 않는 이유가 있습니까?

답변

#container:hover .cube { background-color: yellow; }

#container {
  width: 200px;
  height: 30px;
  border: 1px solid var(--c);
  --c:red;
}
#container:hover {
  --c:blue;
}
#container > div {
  width: 30px;
  height: 100%;
  background-color: var(--c);
}

<div id="container">
  <div>
  </div>
</div>

.container {
  --c:red;
  width:400px;
  display:flex;
  border:1px solid var(--c);
  justify-content:space-between;
  padding:5px;
  background:linear-gradient(var(--c),var(--c)) 0 50%/100% 3px no-repeat;
}
.box {
  width:30%;
  background:var(--c);
  box-shadow:0px 0px 5px var(--c);
  position:relative;
}
.box:before {
  content:"A";
  display:block;
  width:15px;
  margin:0 auto;
  height:100%;
  color:var(--c);
  background:#fff;
}

/*Hover*/
.container:hover {
  --c:blue;
}

<div class="container">
<div class="box"></div>
<div class="box"></div>
</div>