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

Child elements inherent the opacity of their parents when using opacity. You can get around this by using RGBA colors which allow you to specify the opacity along with the color all in one statement.

Try this jsFiddle example

#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 回答