롤오버에서 페이드 인하는 머리 위로 내비게이션을 이동하는 데 문제가 발생했습니다.

Question

웹 사이트에서 작업 중이며 기본적으로 투명한 상자 인 헤더가 필요하며 롤오버 할 때 페이드 인합니다 (horizonsupply.co 참조). 나는 지금까지 로고와 함께 헤더를 성공적으로 만들었지 만 완벽하게 작동하지만 탐색에 넣으려고하면 페이드 인 상자 아래에 링크가 클릭되는 것을 허용하지 않는다. (나는 z를 사용하고있다. -index의 경우도 마찬가지 임) 또는 네비게이션의 z- 인덱스를 페이드 인 상자가 위에있는 숫자로 설정하면 롤오버에서 상자가 페이드 인 할 수 없습니다. 다행히도 그것은 의미가 있습니다. 근본적으로 나는 horizonsupply.co가 계속하고있는 것을 재창조하려고 노력하고있다. 여기

는 내가 가지고있는 HTML입니다 :

<div id="logo" > 
    <img src="images/weblogo.png" alt="weblogo"> 
</div> 

<div id="navigation" class="clearfix"> 
    <div id="navlinks"> 
     <ul> 
      <a href="#"><li>ABOUT</li></a> 
      <a href="#"><li>EPISODES</li></a> 
      <a href="#"><li>CONTACT</li></a> 
     </ul> 
    </div> 
</div> 

<div id="header"></div> 

<div id="main" class="clearfix"> 
    <img src="images/1415210745666.jpeg" alt="1415210745666" width="100%" height="675"> 

    <div id="content"> 
     <div id="episodebox"></div> 
     <div id="episodebox2"></div> 
     <div id="episodebox3"></div> 
    </div> 
</div> 

여기 내 CSS입니다 :

이 많은 방법이있다

#header{ 
    width:100%; 
    height:205px; 
    background-color:#2D2D2D; 
    position:absolute; 
    z-index:1; 

    opacity: 0; /* Change this to .5 for 50% opacity */ 
    -webkit-transition: .5s; 
     -moz-transition: .5s; 
     -ms-transition: .5s; 
     -o-transition: .5s; 
      transition: .5s;  
} 

#header:hover { 
    opacity: 0.87; 
} 

#body{ 
    background-color:#ffffff; 
} 

.img{ 
    max-width:100%; 
    max-height:100%; 
} 

#logo{ 
    position:absolute; 
    width:auto; 
    height:auto; 
    padding-left:25px; 
    padding-top:10px; 
    z-index:3; 
} 

#navigation.clearfix{ 
    position:absolute; 
    width:100%; 
    height:auto; 
    padding-top:160px; 
    padding-left:15px; 
    z-index:1; 
    clear:both; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    margin-top:auto; 
    margin-bottom:auto; 
} 

li{ 
    display:block; 
    float:left; 
    padding:1%; 
} 

a:link { 
    text-decoration: none; 
    color: #F46969; 
    font-family: 'Roboto', sans-serif; 
    font-weight:500; 
} 

#main.clearfix{ 
    clear:both; 
} 

#content{ 
    width:960px; 
    height:900px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#ffffff; 
    margin-top:150px; 
} 

#episodebox{ 
    width:270px; 
    height:50px; 
    background-color:#ffa9a9; 
    margin-left:37px; 
    margin-right:18px; 
    float:left; 
} 

#episodebox2{ 
    width:270px; 
    height:50px; 
    background-color:#ffa9a9; 
    margin-left:18px; 
    margin-right:18px; 
    float:left; 
} 

#episodebox3{ 
    width:270px; 
    height:50px; 
    background-color:#ffa9a9; 
    margin-left:18px; 
    margin-right:37px; 
    float:left; 
} 

Answer 1

, 가장 간단한 솔루션 중 하나는 전체 내용을 래핑하는 것입니다 (로고, 링크 등)을 대신 background-color을 조작하십시오.

#header { 
 
    width: 100%; 
 
    height: 205px; 
 
    background-color: transparent; 
 
    position: absolute; 
 
    z-index: 1; 
 
    -webkit-transition: .5s; 
 
    -moz-transition: .5s; 
 
    -ms-transition: .5s; 
 
    -o-transition: .5s; 
 
    transition: .5s; 
 
} 
 
#header:hover { 
 
    background-color: rgba(45, 45, 45, .85); 
 
} 
 
#body { 
 
    background-color: #ffffff; 
 
} 
 
.img { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
} 
 
#logo { 
 
    position: absolute; 
 
    width: auto; 
 
    height: auto; 
 
    padding-left: 25px; 
 
    padding-top: 10px; 
 
    z-index: 3; 
 
} 
 
#navigation.clearfix { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: auto; 
 
    padding-top: 160px; 
 
    padding-left: 15px; 
 
    z-index: 1; 
 
    clear: both; 
 
} 
 
ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
} 
 
li { 
 
    display: block; 
 
    float: left; 
 
    padding: 1%; 
 
} 
 
a:link { 
 
    text-decoration: none; 
 
    color: #F46969; 
 
    font-family: 'Roboto', sans-serif; 
 
    font-weight: 500; 
 
} 
 
#main.clearfix { 
 
    clear: both; 
 
} 
 
#content { 
 
    width: 960px; 
 
    height: 900px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color: #ffffff; 
 
    margin-top: 150px; 
 
} 
 
#episodebox { 
 
    width: 270px; 
 
    height: 50px; 
 
    background-color: #ffa9a9; 
 
    margin-left: 37px; 
 
    margin-right: 18px; 
 
    float: left; 
 
} 
 
#episodebox2 { 
 
    width: 270px; 
 
    height: 50px; 
 
    background-color: #ffa9a9; 
 
    margin-left: 18px; 
 
    margin-right: 18px; 
 
    float: left; 
 
} 
 
#episodebox3 { 
 
    width: 270px; 
 
    height: 50px; 
 
    background-color: #ffa9a9; 
 
    margin-left: 18px; 
 
    margin-right: 37px; 
 
    float: left; 
 
}

<div id="header"> 
 
    <div id="logo"> 
 
    <img src="http://placekitten.com/g/50/50" alt="weblogo"> 
 
    </div> 
 

 
    <div id="navigation" class="clearfix"> 
 
    <div id="navlinks"> 
 
     <ul> 
 
     <a href="#"> 
 
      <li>ABOUT</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>EPISODES</li> 
 
     </a> 
 
     <a href="#"> 
 
      <li>CONTACT</li> 
 
     </a> 
 
     </ul> 
 
    </div> 
 
    </div> 
 

 
</div> 
 

 
<div id="main" class="clearfix"> 
 
    <img src="http://placekitten.com/g/700/700" alt="1415210745666" width="100%" height="675"> 
 

 
    <div id="content"> 
 
    <div id="episodebox"></div> 
 
    <div id="episodebox2"></div> 
 
    <div id="episodebox3"></div> 
 
    </div> 
 
</div>

Answer 2

마르셀로는 최적의 솔루션을 준, 난 그냥 리

<ul> 
    <li><a href="#">Link1</li></a> 
    <li><a href="#">Link2</li></a> 
    <li><a href="#">Link3</li></a> 
</ul>