Question

我已经设定了，

#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; }

Answer 1

使用opacity时，子元素固有父母的不透明度。您可以使用RGBA颜色来解决这个问题，这些颜色允许您在一个语句中指定不透明度和颜色。

试试 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;
}

Answer 2

正如mylvis所说，如果父母的父母有任何透明度，你就无法将某些东西设置为完全不透明。

RGBA将是我的第一选择，但如果我必须使用不透明度，我会在LIs上设置初始透明度级别，以便可以再次将其重置为1.0。

设置下拉菜单LI的背景颜色在悬停时不透明

2 个答案: