2016-06-21 3 views
1

호버 상태를 사용하는 컨테이너가 있습니다. 위에 마우스를 올리면 배경이 다른 색상으로 변경됩니다.백그라운드에서 마우스 오버하면 위치 절대 값으로 작동하지 않습니다.

또한 컨테이너에 절대 위치를 표시하는 탐색 기능을 사용합니다. 내비게이션 위로 마우스를 가져갈 때마다 백그라운드에서 컨테이너 위에 있지 않기 때문에 배경 변경이 작동하지 않습니다.

해결 방법이 있습니까?

내 코드 (1 위로 마우스) :

.wrapper {position: relative;} 
 
.container {background: red; width: 100%; height:200px;} 
 
.container:hover {background: blue;} 
 
.nav {position:absolute; top:50%;margin: 0 auto; width:100%; text-align:center;}
<div class="wrapper"> 
 
    <div class="container"> 
 
    
 
    </div> 
 
    <div class="nav"> 
 
    <a href="#">1</a> 
 
    </div> 
 
</div>

+0

그것은 어려운 당신이 원하는 것을 이해하기를 이리! –

답변

1

는 컨테이너 내부의 탐색 모음을 이동 :

<div class="wrapper"> 
    <div class="container"> 
     <div class="nav"> 
      <a href="#">1</a> 
     </div> 
    </div> 
</div> 

그것은 너무 내부 position: absolute을 나 밖에되지 않습니다 이슈.


또는 사용하는 자바 스크립트 :

<div class="wrapper"> 
    <div class="container" onmouseover="change()" onmouseout="changeBack()"> 

    </div> 
    <div class="nav" onmouseover="change()"> 
     <a href="#">1</a> 
    </div> 
</div> 

<script> 
    window.change = function() { 
     console.log("hello"); 
     document.getElementsByClassName("container")[1].style.background = "blue"; 
    } 

    window.changeBack = function() { 
     console.log("hello"); 
     document.getElementsByClassName("container")[1].style.background = "red"; 
    } 
</script> 

바이올린 : https://jsfiddle.net/3h1orsmu/1/

+0

불행히도 프로젝트에서는 불가능합니다 :-( – Cray

+0

편집 된 대답은 자바 스크립트 솔루션을 포함합니다 – theblindprophet

1

래퍼의 호버 상태를 사용하지만, 용기 대상 :

.wrapper:hover .container{ 
    background-color:blue; 
} 
+0

미안하지만 래퍼에 컨테이너가 더 이상 존재하지 않아 프로젝트에 참여할 수 없습니다. 하나를 선택하십시오 :-( – Cray

+0

요소에 새로운 클래스를 추가하여 하나의 인스턴스에만 영향을 미칠 수 있습니다. 그런 다음 위의 코드로 대상을 지정하십시오 ("수행 할 수 있고 할 수없는 것" 당신이 문제를 해결할 답을해야하기 때문에.) – Birksy89