更改 css 图像菜单中的当前不透明度

Question

我有一个图像菜单，其中 opacity 在悬停状态下变为 1。我还希望列表的 "current" 成员的不透明度为 1。此时，悬停效果很好（尽管我怀疑 CSS 效率低下），但 "current" 图像痣的不透明度保持与其他图像相同。

HTML:

<div id="content">
    <ul class="menu">
        <li><a class="moles" id="current" href="moles.html">Moles</a></li>
        <li><a class="mice" href="mice.html">Mice</a></li>
        <li><a class="beetles" href="beetles.html">Dung Beetles</a></li>
        <li><a class="doves" href="doves.html">Eared Doves</a></li>
        <li><a class="grasshoppers" href="grasshoppers.html">Grasshoppers</a></li>
    </ul>
    <p>
        TEXT HERE
    </p>
</div>

CSS:

.menu {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #fff;
}

.menu li {
    padding: 1px;
    border: 1px solid #021a40;
    margin: 0;
    height: 122px;
    margin-right: 1em;
    list-style: none;
    background-repeat: no-repeat;
    float: left;
}

.menu li a, .menu li a:visited {
    display: block;
    text-decoration: none;
    text-indent: -9999px;
    height: 122px;
    background-repeat: no-repeat;
}

.menu:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.current {
    opacity: 1;
    filter: alpha(opacity=100);
}

.moles {
    background-image: url(images/rollover01.gif);
    opacity: 0.5;
    filter: alpha(opacity=40);
    width: 122px;
}

.moles:hover {
    background-image: url(images/rollover01.gif);
    opacity: 1;
    filter: alpha(opacity=100);
    width: 122px;
}

.mice {
    background-image: url(images/rollover02.gif);
    opacity: 0.5;
    filter: alpha(opacity=40);
    width: 122px;
}

.mice:hover {
    background-image: url(images/rollover02.gif);
    opacity: 1;
    filter: alpha(opacity=100);
    width: 122px;
}

.beetles {
    background-image: url(images/rollover03.gif);
    opacity: 0.5;
    filter: alpha(opacity=40);
    width: 122px;
}

.beetles:hover {
    background-image: url(images/rollover03.gif);
    opacity: 1;
    filter: alpha(opacity=100);
    width: 122px;
}

.doves {
    background-image: url(images/rollover04.gif);
    opacity: 0.5;
    filter: alpha(opacity=40);
    width: 122px;
}

.doves:hover {
    background-image: url(images/rollover04.gif);
    opacity: 1;
    filter: alpha(opacity=100);
    width: 122px;
}

.grasshoppers {
    background-image: url(images/rollover05.gif);
    opacity: 0.5;
    filter: alpha(opacity=40);
    width: 122px;
}

.grasshoppers:hover {
    background-image: url(images/rollover05.gif);
    opacity: 1;
    filter: alpha(opacity=100);
    width: 122px;
}

Answer 1

您正在使用 class 选择器选择当前，而它有一个 ID。

变化：

.current {opacity: 1;
    filter: alpha(opacity=100);}

收件人：

#current {opacity: 1;
    filter: alpha(opacity=100);}

更改 css 图像菜单中的当前不透明度

Change current opacity in css image menu

html

css

hover