한 요소를 가리킬 때 다른 요소에 영향을 미치는 방법

내가하고 싶은 것은 특정 항목 div을 가리키면 다른 속성에 영향을 미칩니다 div.

예를 들어,에서 이 JSFiddle 데모 , 때를 가져가 위로 #cube가 변경 background-color하지만 내가 원하는 것은 내가 가져가 이상 할 때이다 #container, #cube영향을 받는다.

div {
  outline: 1px solid red;
}
#container {
  width: 200px;
  height: 30px;
}
#cube {
  width: 30px;
  height: 100%;
  background-color: red;
}
#cube:hover {
  width: 30px;
  height: 100%;
  background-color: blue;
}

<div id="container">

  <div id="cube">
  </div>

</div>

큐브가 컨테이너 내부에 직접있는 경우 :

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

컨테이너가 태그를 닫은 후 큐브 옆에 컨테이너가있는 경우 :

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

큐브가 컨테이너 내부에있는 경우 :

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

큐브가 컨테이너의 형제 인 경우 :

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

이 특정 예에서는 다음을 사용할 수 있습니다.

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

이 예제 cube는의 자식 이므로 작동합니다 container. 보다 복잡한 시나리오의 경우 다른 CSS를 사용하거나 JavaScript를 사용해야합니다.

형제 선택기를 사용하는 것은 주어진 요소 위로 마우스를 가져갈 때 다른 요소를 스타일링하는 일반적인 솔루션 이지만 다른 요소가 DOM에서 주어진 요소를 따르는 경우에만 작동 합니다 . 다른 요소가 실제로 호버링 된 요소 앞에 있어야하는 경우 어떻게해야합니까? 아래와 같은 신호 막대 등급 위젯을 구현한다고 가정 해보십시오.

이것은 실제로 설정하여 CSS의 인 flexbox 모델을 사용하여 쉽게 수행 할 수 있습니다 flex-direction에 reverse요소가 그들이 DOM에있어 것과 반대의 순서로 표시됩니다 그래서. 위 스크린 샷은 순수한 CSS로 구현 된 위젯에서 나온 것입니다.

Flexbox는 최신 브라우저의 95 %에서 잘 지원 됩니다.

.rating {
  display: flex;
  flex-direction: row-reverse;
  width: 9rem;
}
.rating div {
  flex: 1;
  align-self: flex-end;
  background-color: black;
  border: 0.1rem solid white;
}
.rating div:hover {
  background-color: lightblue;
}
.rating div[data-rating="1"] {
  height: 5rem;
}
.rating div[data-rating="2"] {
  height: 4rem;
}
.rating div[data-rating="3"] {
  height: 3rem;
}
.rating div[data-rating="4"] {
  height: 2rem;
}
.rating div[data-rating="5"] {
  height: 1rem;
}
.rating div:hover ~ div {
  background-color: lightblue;
}

<div class="rating">
  <div data-rating="1"></div>
  <div data-rating="2"></div>
  <div data-rating="3"></div>
  <div data-rating="4"></div>
  <div data-rating="5"></div>
</div>

유용한 게시물에 대해 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; }

의 .cubeCssClass는 어디에 있습니까 #cube?

Firefox , Chrome 및 Edge 에서 테스트되었습니다 .

다음은 특정 선택기를 고려하지 않고 :hover주 요소 의 상태 만 사용하여 다른 요소에 영향을 줄 수있는 또 다른 아이디어입니다 .

이를 위해 사용자 지정 속성 (CSS 변수)을 사용합니다. 우리가 사양 에서 읽을 수 있듯이 :

사용자 정의 속성은 일반 속성 이므로 모든 요소에서 선언 할 수 있으며 일반 상속 및 계단식 규칙으로 해결 됩니다 ...

기본 요소 내에서 사용자 정의 특성을 정의하고이를 사용하여 하위 요소의 스타일을 지정하는 것이 목적이며 이러한 특성이 상속되므로 마우스를 가져 가면 기본 요소 내에서 변경해야합니다.

예를 들면 다음과 같습니다.

#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>

호버와 결합 된 특정 선택기를 사용하는 것보다 이것이 더 나은 이유는 무엇입니까?

이 방법을 고려하기에 좋은 이유는 2 가지 이상 있습니다.

1. 동일한 스타일을 공유하는 많은 중첩 요소가있는 경우 복잡한 선택기가 호버링 할 때 모든 요소를 ​​타겟팅하지 않아도됩니다. 사용자 지정 속성을 사용하면 부모 요소를 가리키면 값이 변경됩니다.
2. 사용자 정의 특성을 사용하여 특성 값과 그 일부 값을 바꿀 수 있습니다. 예를 들어 우리는 색에 대한 사용자 정의 속성을 정의하고 우리가 내에서 사용 border, linear-gradient, background-color, box-shadow등이 호버에 모두에게 이러한 속성을 다시 설정하라는 우리를 방지 할 수 있습니다.

보다 복잡한 예는 다음과 같습니다.

.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>

위에서 볼 수 있듯이 다른 요소의 많은 속성을 변경하려면 CSS 선언이 하나만 필요 합니다.