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

Program / 글쓴이

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

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

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