code

한 요소가 대기 중일 때 다른 요소에 영향을 미치는 방법

starcafe 2023. 4. 8. 09:04
반응형

한 요소가 대기 중일 때 다른 요소에 영향을 미치는 방법

것은 한 것이 있을 때divdiv.

예를 들어, 이 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의 containerCSS 자바스크립트

형제 선택기를 사용하는 것은 특정 요소 위로 이동할 때 다른 요소를 스타일링하기 위한 일반적인 솔루션이지만, 다른 요소가 DOM에서 지정된 요소를 따르는 경우에만 작동합니다.다른 요소들이 실제로 존재해야 할 때 우리는 무엇을 할 수 있을까요?다음과 같은 신호 막대 등급 위젯을 구현하려고 합니다.

신호 막대 등급 위젯

이것은 CSS 플렉스박스 모델을 사용하여 다음과 같이 설정함으로써 실제로 쉽게 실행할 수 있습니다.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>

이것만이 나에게 효과가 있었다.

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

서 ★★★★★.cube는 CssClass 에 있는 입니다.#container.

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. 동일한 스타일을 공유하는 중첩 요소가 여러 개 있는 경우 모든 요소를 호버링 대상으로 지정하기 위한 복잡한 선택기가 필요하지 않습니다.Custom 속성을 사용하면 부모 요소에서 이동할 때 값을 변경할 수 있습니다.
  2. 사용자 지정 속성은 속성 값뿐만 아니라 속성의 일부 값도 대체하는 데 사용할 수 있습니다., 속성을 하고, 의 커스텀 을 를, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, 개, a, a, a, a, a, a, a, a, a, a a, a, a, a,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 선언은 1개뿐입니다.

Mike와 Robertc가 도움이 되는 글을 써주셔서 감사합니다!

에 HTML을 :hover다른 요소에서 스타일 변경을 목표로 하는 두 요소는 직접 관련이 있어야 합니다. 즉, 형제, 자식 또는 형제자매입니다., 두 가 서로 둘다 큰 안에 .

가 내 및 "Definitions"를 때 에 있는 .:hover강조 표시된 용어보다 'definition' 요소가 'text' 요소 안에 표시되지 않도록 했습니다.

거의 포기하고 javascript만 페이지에 추가했는데, 이게 바로 미래야!원하는 효과를 얻기 위해 요소를 어디에 배치해야 하는지 알려주는 CSS와 HTML의 백사스를 참을 필요가 없습니다.결국 우리는 타협했다.

의 실제 합니다.단, 는 유효합니다.:hoverposition속성을 사용하여 원하는 임의의 요소를 표시할 수 있습니다. fixed를 하여 fixed: fixed: fixed: fixed: fixed: fixed: fixed: fixed: fixed: fixed::hoverHTML 문서의 위치에 관계없이 사용자 화면에서 원하는 작업을 수행할 수 있습니다.

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둘 중 하나여야 한다#explainBox ★★★★★★★★★★★★★★★★★★★★★★ 내에서#explainBox. #된 위치 #definitions 밖)에로 표시됩니다.#explainBoxHTML 문서 내에서 바람직하지 않은 위치에 있는 경우에도 마찬가지입니다.

것을 라고 생각되는 것을 알고 .#id요소의 . 단, 이 1 "HTML" 의 , "HTML" 의 , "HTML" 의 경우,#light의 가 고유하기 때문에 으로 기술할 수 .#id elementsd 소 ' 。 말을 요?id #light엔? in in??

다른 답변에서 이미 제공된 공통 선택기 외에도 이제 부모/자녀 또는 형제 관계가 없는 상황에서 신뢰할 수 있습니다.

다음은 예를 제시하겠습니다.

.box {
  width: 200px;
  aspect-ratio: 1;
  display: inline-block;
  border: 1px solid red;
}

.box > div {
  margin: 5px;
  height: 100%;
  border: 2px solid green;
  cursor: pointer;
}
/* when div1 is hovered make div2 blue */
body:has(#div1:hover) #div2 {
  background: blue;
}
/* when div2 is hovered make div1 purple */
body:has(#div2:hover) #div1 {
  background: purple;
}
<div class="box">
  <div id="div1">
  </div>
</div>

<div class="box">
  <div id="div2">
  </div>
</div>

처럼 '하다', '하다', '하다', '하다', '하다'에 영향을 줄 수 .div1div2그리고 역도 성립.

경고: CSS를 사용할 수 있는 경우: Javascript 없이 CSS를 사용하십시오!

위치를 알 수 없거나 도달할 수 없는 요소를 선택하려면 JavaScript를 사용할 수 있습니다.

const cube = document.getElementById('cube')
const container = document.getElementById('container')

cube.addEventListener('mouseover', () => container.style.backgroundColor = "blue")
cube.addEventListener('mouseleave', () => container.style.backgroundColor = "white")
div {
  outline: 1px solid red;
  width: 200px;
  height: 30px;
}

#cube {
  background-color: red;
}
<main>
  <div id="container">
  </div>
</main>
<div id="cube">
</div>

#imageDiv:hover  #detailDiv
{
    z-index: -999 !important;
}

여기서

#imageDiv 것을 나타냅니다.

#detailDiv되는 두 입니다.

divzindex됩니다.div

효과가 있다

언급URL : https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered

반응형

'code' 카테고리의 다른 글

PowerShell에서 어레이의 모든 개체에서 하나의 속성 값 선택  (0) 2023.04.08
Foreach-Object에서 'continue'가 'break'처럼 작동하는 이유는 무엇입니까?  (0) 2023.04.08
"옵션" 매개 변수(각도)UI 라우터를 사용한 JS 상태/뷰  (0) 2023.04.03
python의 json.dump()와 json.dumps()의 차이점은 무엇입니까?  (0) 2023.04.03
비인터랙티브모드에서의 CRA Jest 실행  (0) 2023.04.03

'code'의 다른글

  • 현재글한 요소가 대기 중일 때 다른 요소에 영향을 미치는 방법

관련글

댓글

티스토리툴바