같은 클래스의 중첩 된 div, 마우스 오버시 자식 표시

debugcn 에 게시 Dev

CdB

부모를 가리킬 때 숨겨진 div를 표시하려고합니다.
내 문제는 같은 클래스의 중첩 된 div가 있고 "내부"div를 가리키면 부모도 가리키고 숨겨진 자식이 모두 표시된다는 것입니다.
html :

<div class="a_class">
    lorem ipsum
    <div class="inner">
        <a href="">hidden...</a>
    </div>
    <div class="b_class">
        blahblah<br />
        <div class="a_class">
            <div class="inner">
                <a href="">hidden...</a>
            </div>
            lorem ipsum
        </div>
    </div>
</div>

css :

.inner{display:none;}
.a_class:hover > .inner{display: block;}

바이올린 : http://jsfiddle.net/Nb6tD/

즉, 나는 이것을 달성하려고합니다 : 두 번째 .a_class 위로 마우스를 가져 가면 "부모".a_class 아래의 .inner가 아니라 그 아래에있는 .inner 만 표시되어야합니다.

CSS로만 가능합니까?

미리 감사드립니다

편집 : 대답
그래서, 그것은 HTML 마크 업이 변경되지 않는 한 순수한 CSS로 수행 할 수없는 것처럼 보입니다-내 경우에는 불가능합니다. 나는 css3-magic 솔루션을 원했지만 그러한 옵션이 없기 때문에 자바 스크립트로 갈 것입니다.

html 구조를 변경할 가능성이있는 모든 사람들을 위해 향후 참조를 위해 가장 적합한 솔루션을 수락했습니다.

xec

html 구조를 변경하지 않고는 "고정"할 수 없다고 생각합니다. 마우스 오버 가능 영역과 해당 버튼을 둘러싸는 요소를 가질 수 있습니다.

여기에 .hoverAreadiv를 추가했습니다 . (가장 안쪽에 하나만 포함되어 있으므로 추가 div가 필요하지 않습니다. .inner)

HTML

<div class="a_class">
    <div class="hoverArea">
        lorem ipsum
        <div class="inner">
            <a href="">hidden...</a>
        </div>
    </div>
    <div class="b_class">
        blahblah<br />
        <div class="a_class hoverArea">
            <div class="inner">
                <a href="">hidden...</a>
            </div>
            lorem ipsum
        </div>
    </div>
</div>

CSS

.hoverArea:hover > .inner{
    display: block;
}

http://jsfiddle.net/Nb6tD/7/의 데모

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-05-29

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사