부모가 가리키면 자식 요소의 CSS 변경

159

우선, 이것이 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");
        });

— 하틀리 브로디
소스

260

왜 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

— 스티븐
소스

그 코드는 나를 위해 작동하지 않습니다. ".parent : hover"가 아니라 ".parent.hover"라고 말해야합니까? 당신이 전에 무엇을 본 적이없는 경우. 쉼표로 여러 스타일 선택기가 동일한 스타일을 사용하고 있지 않습니까? 나는 그것이 어떻게 도움이되는지 모르겠다. CSS에 대한 더 많은 정보, 호의 0 =]

— Hartley Brody

6

:hoverCSS2에 의해 정의 된 "동적 의사 클래스"중 하나입니다 ( 여기서는 spec입니다 ). 여기에 간단한 예는 다음과 같습니다 http://jsfiddle.net/5FLr4/ . 그것은 나를 위해 작동합니다.

— Lee

아 너무 고마워! 나는 실제로 자식 텍스트를 보이지 않게하는 상대 위치를 가졌습니다 ... doh! >. <도움을 주셔서 감사합니다!

— Hartley Brody 2019

자식 요소 내에서 스크롤 막대의 강조 표시를 변경하려는 경우 .child ::-webkit-scrollbar-thumb에서 작동하지 않습니다.

— thdoan

1

.parent:not(:hover) .child { display: none; }IE6에 대해 걱정하지는 않지만 잘 작동하는 것 같습니다. 그러나이 방법으로 균일 한 display속성을 원하지 않는 요소에 사용할 수 있습니다 .

— 블레어 코놀리

147

JavaScript 또는 jquery를 사용할 필요가 없으며 CSS로 충분합니다.

.child{ display:none; }
.parent:hover .child{ display:block; }

데모보기

— 알리 아드 라비
소스

9

사용하십시오 toggleClass().

$('.parent').hover(function(){
$(this).find('.child').toggleClass('color')
});

color수업이 어디 있어요. 원하는 행동을 취하기 위해 원하는대로 수업을 꾸밀 수 있습니다. 이 예제는 마우스가 들어오고 나갈 때 클래스가 추가 및 제거되는 방법을 보여줍니다.

여기에서 작업 예를 확인 하십시오 .

— 후세인
소스

7

.parent:hover > .child {
    /*do anything with this child*/
}

— 아미르 라만
소스

3

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에서 작동하는 것을 볼 수 있습니다 .

— 로저 롤 로프
소스

3

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>

— z666zz666z
소스

이것은 질문이하는 것을하지 않습니다. 마우스를 올려 놓은 요소 주위의 경계를 변경합니다. 자식 요소 주위의 테두리가 아닙니다.

— jenniwren

2

당신이 사용하는 경우 트위터 부트 스트랩 드롭 다운 메뉴에 대한 스타일과 기본 JS를 :

.child{ display:none; }
.parent:hover .child{ display:block; }

이것은 끈적 끈적한 드롭 다운을 만드는 누락 된 조각입니다 (성가하지 않습니다)

동작은 다음과 같습니다.
1. 클릭하면 계속 열어두고 페이지의 다른 곳을 다시 클릭하면 닫힙니다.
2. 마우스가 메뉴 요소 밖으로 스크롤되면 자동으로 닫힙니다.

— R 토빈
소스

2

끔찍한 이유가 있는지 확실하지 않지만 페이지의 많은 요소와 함께 눈에 띄는 성능 문제없이 최신 버전의 Chrome / Firefox에서 나와 함께 작동하는 것 같습니다.

*:not(:hover)>.parent-hover-show{
    display:none;
}

그러나이 방법으로 필요한 것은 parent-hover-show요소 에 적용 하고 나머지는 처리하는 것입니다. 항상 "차단"되거나 각 유형에 대해 여러 클래스를 만들지 않고 원하는 기본 표시 유형을 유지할 수 있습니다.

— 브라이언 레이시 먼
소스

0

CSS에서 변경하려면 자식 클래스를 설정할 필요조차 없습니다.

.parent > div:nth-child(1) { display:none; }
.parent:hover > div:nth-child(1) { display: block; }

— hamboy75
소스