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

I have a menu of images where the opacity changes to 1 in the hover state. I also want the "current" member of the list to have an opacity of 1. At this point, the hovering works fine (though I suspect the CSS is inefficient), but the "current" image of the mole remains at the same reduced opacity as the other images.

我有一个图像菜单，其中不透明度在悬停状态下变为1。我还希望列表中的“当前”成员的不透明度为1.此时，悬停工作正常（虽然我怀疑CSS效率低下），但痣的“当前”图像保持不变不透明度与其他图像一样。

HTML:

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:

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

1 个解决方案

#1

You are selecting the current with selector of class, while it has an id.

您正在选择具有类的选择器的当前值，而它具有id。

Change:

更改：

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

To:

至：

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