내가하고 싶은 것은 특정 항목 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 %에서 잘 지원 됩니다.
답변
유용한 게시물에 대해 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; }
의 .cube
CssClass는 어디에 있습니까 #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 가지 이상 있습니다.
- 동일한 스타일을 공유하는 많은 중첩 요소가있는 경우 복잡한 선택기가 호버링 할 때 모든 요소를 타겟팅하지 않아도됩니다. 사용자 지정 속성을 사용하면 부모 요소를 가리키면 값이 변경됩니다.
- 사용자 정의 특성을 사용하여 특성 값과 그 일부 값을 바꿀 수 있습니다. 예를 들어 우리는 색에 대한 사용자 정의 속성을 정의하고 우리가 내에서 사용
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 선언이 하나만 필요 합니다.