상위 메뉴의 불투명도가 하위 메뉴로 전송됩니다. CSS를 사용하여이를 방지하는 방법

지금 부모 메뉴에는 호버시 불투명도 이동이 있습니다.이 메뉴는 하위 메뉴 (이전 & 이전)로 전송됩니다. 부모의 불투명도 밴드 만 보이도록 하위 메뉴에 배경이 선명하게 보이기를 바랍니다. 하위 클래스에 대해 li 클래스를 사용하여 부모를 관리하는 li 클래스에서 면제 할 수있는 방법이 있습니까? 나는 여러 가지 시도를 해왔지만 제대로 작동하지 않는 것처럼 보입니다.상위 메뉴의 불투명도가 하위 메뉴로 전송됩니다. CSS를 사용하여이를 방지하는 방법

Demo

HTML

<div> 
    <ul id="mainmenu"> 
     <li class="liHome"> 
      <a class="maintextcolour" href="#item-x1y1" id="Home" rel= 
      "none">INFO</a> 
     </li> 

     <li class="liServices"> 
      <a class="maintextcolour" href="#item-x1y2" id="Services" rel= 
      "SubMenuY2">EXHIBITIONS</a> 

      <ul class="submenu" id="SubMenuY2"> 
       <li class="sub1"> 
        <a class="maintextcolour" href="#">CURRENT</a> 
       </li> 

       <li class="sub1"> 
        <a class="maintextcolour" href="#">PREVIOUS</a> 
       </li> 
      </ul> 
     </li> 

     <li id="liEnvironment"> 
      <a class="maintextcolour" href="#item-x1y3" id="Environment" 
      rel="none">CV</a> 
     </li> 

     <li id="liCareer"> 
      <a class="maintextcolour" href="#item-x1y4" id="Career" rel= 
      "none">NEWS</a> 
     </li> 

     <li id="liContact"> 
      <a class="maintextcolour" href="#item-x1y5" id="Contact" rel= 
      "none">MORE</a> 
     </li> 
    </ul> 
</div>

CSS : 여기

@charset UTF-8; 

/* CSS Document */ 
body { 
    background-color: #666; 
    background-size: 100%; 
    background-repeat: no-repeat; 
} 

#mainmenu { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    position: relative; 
} 

#mainmenu li { 
    clear: left; 
    position: relative; 
} 

#mainmenu a { 
    display: block; 
    overflow: hidden; 
    float: left; 
    width: 100%; 
    position: relative; 
    opacity: 1; 
    -webkit-transition: all .4s ease-in-out; 
    padding-left: 20px; 
} 

#mainmenu li:hover a { 
    background-position: 0 0; 
    background-color: clear; 
    background-color: rgba(255,255,255,0.5); 
    width: 100%; 
    opacity: 0; 
    -webkit-transition: none; 
} 

#mainmenu li.active a { 
    background-position: 0 0; 
    background-color: clear; 
    width: 100%; 
} 

.submenu { 
    list-style-type: none; 
    float: left; 
    display: none; 
    position: absolute; 
    left: 135px; 
    top: 0; 
    width: auto; 
} 

#mainmenu li a:hover + .submenu,.submenu:hover { 
    display: block; 
} 

.submenu li { 
    display: inline-block; 
    clear: none !important; 
} 

.submenu li a { 
    float: right; 
    margin-left: 10px; 
} 

.maintextcolour { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
    color: #FFF; 
    text-decoration: none; 
} 

.maintextcolour:hover { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 24px; 
    color: #0FF; 
    text-decoration: none; 
} 

.headertext { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    color: #FFF; 
    text-decoration: none; 
}

출처

2013-06-30 user2536021

나는 그것을 얻지 않는다. 부모 배경을 보이게하고 싶습니다. 당신의 바이올린 에서이 작품? 또는 불투명도가 영향을받지 않는 배경을 하위 메뉴 항목에 표시 하시겠습니까? 또는 부모의 배경을 하위 메뉴의 항목이있는 곳에 만 숨기시겠습니까? – Tyblitz

오랫동안 hella 때문에 게시물을 읽지는 않았지만 불투명 대신 rgba를 사용해야한다고 생각합니다. – dezman

하위 메뉴에 불투명도를 지정하고 싶습니다. 현재 부모와 자식에 불투명도가 있습니다. 그것은 아이에게 밝은 회색으로 보입니다. 나는 그것이 모두 같은 회색이되고 싶습니다. 그 말이 더 의미가 있습니까? – user2536021

업데이트 된 Fiddle link입니다. 방금 다음 CSS에 색상을 추가했습니다.

#mainmenu > li:hover > a { 
    background-position: 0 0; 
    background-color:clear; 
    color:#0fffff; 
    background-color:rgba(255,255,255,0.5); 
    width:100%; 
    \ 
opacity: 0; 
    -webkit-transition: none; 
}

희망이 있으시길 바랍니다.

출처

2013-07-01 04:57:06

그렇습니다! 고맙습니다! – user2536021

상위 메뉴의 불투명도가 하위 메뉴로 전송됩니다. CSS를 사용하여이를 방지하는 방법

답변

관련 문제