부모가 호버링될 때 자식 요소의 CSS 변경
우선, 저는 이것이 CSS3에 너무 복잡하다고 생각합니다. 하지만 어딘가에 해결책이 있다면, 저는 그것을 대신하고 싶습니다.
HTML은 꽤 간단합니다.
<div class="parent">
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<div class="child">
Text Block 2
</div>
</div>
하위 div는 기본적으로 없음으로 표시되도록 설정되지만 마우스가 상위 div 위에 있을 때는 display:block으로 변경됩니다.문제는 이 마크업이 내 사이트의 여러 위치에 나타나고 마우스가 부모 위에 있는 경우에만 자식이 표시되고 마우스가 다른 부모 위에 있는 경우에는 자식이 표시되기를 원한다는 것입니다(모두 클래스 이름이 같고 ID가 없음).
사용해 보았습니다.$(this)그리고..children()
$('.parent').hover(function(){
$(this).children('.child').css("display","block");
}, function() {
$(this).children('.child').css("display","none");
});
왜 그냥 CSS를 사용하지 않습니까?
.parent:hover .child, .parent.hover .child { display: block; }
그런 다음 IE6용 JS를 추가합니다(예: 조건부 주석 내부). 이는 다음을 제대로 지원하지 않습니다.
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
다음은 간단한 예입니다.피들
JavaScript나 jquery를 사용할 필요 없이 CSS로 충분합니다.
.child{ display:none; }
.parent:hover .child{ display:block; }
.parent:hover > .child {
/*do anything with this child*/
}
사용하다toggleClass().
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
color할 수 을 진행할 수 .원하는 행동을 달성하기 위해 원하는 스타일로 수업을 진행할 수 있습니다.예제에서는 마우스를 넣고 뺄 때 클래스를 추가하고 제거하는 방법을 보여 줍니다.
여기에서 작업 예제를 선택합니다.
이렇게 해야 할 끔찍한 이유가 있는지는 모르겠지만, 페이지에 꽤 많은 요소가 있는 눈에 보이는 성능 문제 없이 Chrome/Firefox의 최신 버전에서 함께 작동하는 것 같습니다.
*:not(:hover)>.parent-hover-show{
display:none;
}
하지만 이 방법으로, 당신은 신청하기만 하면 됩니다.parent-hover-show요소로 이동하고 나머지는 처리되며, 항상 "차단"되거나 각 유형에 대해 여러 클래스를 만들지 않고 원하는 기본 표시 유형을 유지할 수 있습니다.
CSS에서 변경하려면 하위 클래스를 설정할 필요도 없습니다.
.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }
Stephen의 대답은 옳지만 그의 대답을 제가 각색한 것입니다.
HTML
<div class="parent">
<p> parent 1 </p>
<div class="child">
Text Block 1
</div>
</div>
<div class="parent">
<p> parent 2 </p>
<div class="child">
Text Block 2
</div>
</div>
CSS
.parent { width: 100px; min-height: 100px; color: red; }
.child { width: 50px; min-height: 20px; color: blue; display: none; }
.parent:hover .child, .parent.hover .child { display: block; }
jQuery
//this is only necessary for IE and should be in a conditional comment
jQuery('.parent').hover(function () {
jQuery(this).addClass('hover');
}, function () {
jQuery(this).removeClass('hover');
});
이 예제는 jsFiddle에서 다시 작업하는 것을 볼 수 있습니다.
2~3개 뿐만 아니라 원하는 만큼 더 많은 수준으로 확장할 수 있기 때문에 더 나은 솔루션이라고 생각합니다.
저는 테두리를 사용하지만 배경색처럼 원하는 스타일로 할 수도 있습니다.
국경을 통해 다음과 같은 목표를 달성할 수 있습니다.
- 다른 테두리 색상은 단 하나의 디브, 즉 마우스가 있는 곳에 있는 디브, 부모나 자녀가 아닌 디브만 볼 수 있도록 하여 나머지는 흰색으로 유지합니다.
http://jsbin.com/ubiyo3/13 에서 테스트할 수 있습니다.
코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Hierarchie Borders MarkUp</title>
<style>
.parent { display: block; position: relative; z-index: 0;
height: auto; width: auto; padding: 25px;
}
.parent-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.parent-bg:hover { border: 1px solid red; }
.child { display: block; position: relative; z-index: 1;
height: auto; width: auto; padding: 25px;
}
.child-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.child-bg:hover { border: 1px solid red; }
.grandson { display: block; position: relative; z-index: 2;
height: auto; width: auto; padding: 25px;
}
.grandson-bg { display: block; height: 100%; width: 100%;
position: absolute; top: 0px; left: 0px;
border: 1px solid white; z-index: 0;
}
.grandson-bg:hover { border: 1px solid red; }
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">
Child
<div class="grandson">
Grandson
<div class="grandson-bg"></div>
</div>
<div class="child-bg"></div>
</div>
<div class="parent-bg"></div>
</div>
</body>
</html>
Twitter 부트스트랩 스타일링 및 기본 JS를 드롭다운 메뉴로 사용하는 경우:
.child{ display:none; }
.parent:hover .child{ display:block; }
이것은 스티커 드롭다운을 만들 수 있는 누락된 부분입니다(귀찮지 않습니다).
- 동작은 다음과 같습니다.
- 클릭할 때 열기 상태 유지, 페이지의 다른 위치를 다시 클릭할 때 닫기
- 메뉴의 요소에서 마우스가 스크롤되면 자동으로 닫힙니다.
제게 효과가 있었던 것은 특정 요소를 대상으로 하는 nth-of-type, 즉 SVG 아이콘을 사용하는 대신 display:none을 사용했습니다. 나중에 찾지 않기 위해 채우기 색을 배경색으로 사용했습니다. 그래서 이 경우 흰색을 사용한 다음 부모로 대상을 지정하고 :nth-type-of-(1)의 SVG 요소를 직접 찾습니다.
HTML
<div class="feature-col">
<div class="feature-icon bg-primary bg-dark" style="border:0.125em white">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="white" class="bi bi-laptop" viewBox="0 0 16 16"><path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"></path>
</svg>
</div>
<h5>Website Design and Hosting</h5>
<p>Some text in here that is a child element as well...</p>
<a href="javascript:void(0);" class="icon-link">Call to action</a>
</div>
CSS
.feature-col:hover svg:nth-of-type(1){
fill: #FF5B0D;
cursor:pointer;
}
가지고 놀 JSFIDDLE: https://jsfiddle.net/93de7zbc/6/
CSS 가시성 속성 사용
Try to use the CSS visibility property to keep with the size div to be possible to hover the element: Using CSS Sibling .text {
visibility: hidden;
margin: 10px;
}
.sibling {
cursor: pointer;
}
.sibling:hover + .text {
visibility: visible;
} <h3 class="sibling">
Hover me to show the sibling content
</h3>
<div class="text">Text Block 1</div>언급URL : https://stackoverflow.com/questions/5061940/changing-the-child-elements-css-when-the-parent-is-hovered
'programing' 카테고리의 다른 글
| registerGlobal(), configure(), configureGlobal(), configureGlobal(), configureGlobal Security in Spring security 간의 차이 (0) | 2023.08.19 |
|---|---|
| jQuery vs jQuery 모바일 vs jQuery UI? (0) | 2023.08.19 |
| 판다 데이터 프레임에 행 삽입 (0) | 2023.08.19 |
| 테스트에 사용자 지정된 ObjectMapper가 사용되지 않음 (0) | 2023.08.19 |
| 패싯 그리드의 xlim 및 ylim 설정 방법 (0) | 2023.08.19 |