0

設定しました、

#navi ul li:hover { background-color: red; opacity: 1.0; filter: alpha(opacity=100); }

しかし、うまくいきません。

コードは次のとおりです。http://jsfiddle.net/mylvis/jEyTy/

<div id="navi">
    <ul>
      <li><a href="">1</a></li>
      <li><a href="">2</a>
            <ul>
                <li><a>1.1</a></li>
                <li><a>1.2</a></li>
                <li><a>1.3</a></li>
            </ul>
      </li>
      <li><a href="">3</a></li>
      <li><a href="">4</a></li>
    </ul>
  </div>

#navi { width: 100%; height: 40px; margin-top: 10px; position: relative; background-color: #0071BC; opacity: 0.75; filter: alpha(opacity=75); font-family: 'Russo One', sans-serif; z-index: 100; }
#navi ul { padding: 0; margin: 0; display: inline-table; text-align: center; position: relative; z-index: 100; }
#navi ul:after { content: ""; clear: both; display: block; }
#navi ul li { display: block; padding: 10px 20px 11px 20px; list-style: none; position: relative; float: left; }
#navi ul li a { font-size: 12pt; color: #F7931E; text-transform: uppercase; }
#navi ul li:hover { background-color: red; opacity: 1.0; filter: alpha(opacity=100); }
#navi ul li:first-child { margin-left: 10px; }
#navi ul li:last-child { margin-left: 210px; }
#navi ul ul { display: none; position: absolute; top: 100%; left: 0; background-color: #0071BC; opacity:0.75; filter:alpha(opacity=75); z-index: 100; }
#navi ul ul li { float: none; position: relative; font-size: 11pt; }
#navi ul ul li:first-child { margin: 0; }
#navi ul ul li:last-child { padding-bottom: 10px; margin: 0; }
#navi ul li:hover > ul { display: block; z-index: 100; }
4

2 に答える 2

1

子要素は、使用時に親の不透明度を継承しopacityます。これを回避するには、RGBAカラーを使用して、不透明度とカラーをすべて 1 つのステートメントで指定できるようにします。

このjsFiddleの例を試してください

#navi {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    position: relative;
    background-color: rgba(0,113,188,.75);
    font-family:'Russo One', sans-serif;
    z-index: 100;
}
#navi ul {
    padding: 0;
    margin: 0;
    display: inline-table;
    text-align: center;
    position: relative;
    z-index: 100;
}
#navi ul:after {
    content:"";
    clear: both;
    display: block;
}
#navi ul li {
    display: block;
    padding: 10px 20px 11px 20px;
    list-style: none;
    position: relative;
    float: left;
}
#navi ul li a {
    font-size: 12pt;
    color: #F7931E;
    text-transform: uppercase;
}
#navi ul li:hover {
    background-color: rgba(255,0,0,1);
}
#navi ul li:first-child {
    margin-left: 10px;
}
#navi ul li:last-child {
    margin-left: 210px;
}
#navi ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: rgba(0,113,188,.75);
    z-index: 100;
}
#navi ul ul li {
    float: none;
    position: relative;
    font-size: 11pt;
}
#navi ul ul li:first-child {
    margin: 0;
}
#navi ul ul li:last-child {
    padding-bottom: 10px;
    margin: 0;
}
#navi ul li:hover > ul {
    display: block;
    z-index: 100;
}
于 2013-05-16T16:23:42.103 に答える
0

mylvis が言ったように、親が何らかのレベルの透明度を持っている場合、何かを完全に不透明に戻すことはできません。

RGBA が私の最初の選択肢ですが、不透明度を使用する必要がある場合は、LI 自体に初期透明度レベルを設定して、再度 1.0 にリセットできるようにします。

于 2013-05-16T16:27:37.947 に答える