[jquery] 부모가 가리키면 자식 요소의 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는 다음과 같이 표시됩니다. 기본적으로 표시되지만 display : block;으로 변경됩니다. 마우스를 부모 div 위에 올려 놓으면 문제는이 마크 업이 내 사이트의 여러 곳에 나타나고 마우스가 부모 위에있을 때만 표시되도록하고 마우스가 다른 부모 중 하나에 있지 않은 경우에만 표시되도록하고 싶습니다 (모두 같은 클래스를 가짐) 이름과 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');
});
간단한 예를 들면 다음과 같습니다. Fiddle
답변
JavaScript 또는 jquery를 사용할 필요가 없으며 CSS로 충분합니다.
.child{ display:none; }
.parent:hover .child{ display:block; }
답변
사용하십시오 toggleClass().
$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});
color수업이 어디 있어요. 원하는 행동을 취하기 위해 원하는대로 수업을 꾸밀 수 있습니다. 이 예제는 마우스가 들어오고 나갈 때 클래스가 추가 및 제거되는 방법을 보여줍니다.
여기에서 작업 예를 확인 하십시오 .
답변
.parent:hover > .child {
/*do anything with this child*/
}
답변
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 개뿐만 아니라 원하는 수준으로 확장 할 수 있기 때문에 더 나은 솔루션이라고 생각합니다.
테두리를 사용하지만 배경색과 같이 원하는 스타일로 수행 할 수도 있습니다.
국경과 함께 아이디어는 다음과 같습니다.
- 다른 테두리 색은 하나의 div, 마우스가있는 부모의 위치, 자식이 아닌 div가 있으므로 나머지 색상은 흰색으로 유지되는 동안 다른 색상의 div 테두리 만 볼 수 있습니다.
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>
답변
당신이 사용하는 경우 트위터 부트 스트랩 드롭 다운 메뉴에 대한 스타일과 기본 JS를 :
.child{ display:none; }
.parent:hover .child{ display:block; }이것은 끈적 끈적한 드롭 다운을 만드는 누락 된 조각입니다 (성가하지 않습니다)
- 동작은 다음과 같습니다.
- 클릭하면 계속 열어두고 페이지의 다른 곳을 다시 클릭하면 닫힙니다.
- 마우스가 메뉴 요소 밖으로 스크롤되면 자동으로 닫힙니다.
