의사 클래스 : Hover는 IE7에서 작동하지 않습니다

StackOverflow https://stackoverflow.com/questions/143296

  •  02-07-2019
  •  | 
  •  

문제

간단한 코드가 있습니다.

<div class="div1">
  <div class="div2">Foo</div>
  <div class="div3">
    <div class="div4">
      <div class="div5">
        Bar
      </div>        
    </div>
  </div>
</div>

그리고이 CSS :

.div1{
  position: relative;
}
.div1 .div3 {
  position: absolute;
  top: 30px;
  left: 0px;
  width: 250px;
  display: none;
}
.div1:hover .div3 {
  display: block;
}
.div2{
  width: 200px;
  height: 30px;
  background: red;
}
.div4 {
  background-color: green;
  color: #000;  
}
.div5 {}

문제는 : 내가 커서를 움직일 때 .div2 에게 .div3 (.div3 자녀이기 때문에 눈에 띄는 상태를 유지해야합니다 .div1) 그런 다음 호버가 비활성화됩니다. IE7에서 테스트하고 있습니다. FF에서는 잘 작동합니다. 내가 뭘 잘못하고 있죠? 또한 제거 할 때도 깨달았습니다 .div5 작동하는 것보다 태그. 어떤 아이디어?

도움이 되었습니까?

해결책

IE7은 신청할 수 없습니다 :hover DocType을 명시 적으로 지정하지 않는 한, 비 캔더 요소에 대한 의사 클래스. DocType 선언을 페이지에 추가하면 완벽하게 작동해야합니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

IE7/Quirks 모드에 대한 자세한 내용은에서 찾을 수 있습니다. 이 블로그 게시물.

다른 팁

이 솔루션이 더 잘 작동하고 조금 더 깨끗하다는 것을 알았습니다.

    <style type="text/css">
        * {
            color: #fff;
        }
        .wrapper {

        }

        .trigger {
            background: #223;
        }

        .appear {
            background: #334;
            display: none;
        }

        .trigger:hover .appear {
            display: block;
        }
    </style>
</head>

<body>

    <div class="wrapper">
        <div class="trigger">
            <p>This is the trigger for the hover element.</p>
            <div class="appear">
                <p>I'm <strong>alive!</strong></p>
            </div>
        </div>
    </div>

</body>

페이스트 빈.

이중 마진 문제 일 수 있습니까? 나는 디스플레이를했다 : li에 일어 났을 때 인라인-블록http://www.positioniseverything.net/explorer/doubled-margin.html

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top