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