html - 3 图像过渡不透明度点击问题

Question

我正在开发一个网站，导航按钮像往常一样有 3 种状态，初始空闲状态、悬停状态和点击状态以及显示您所在页面的状态。

我想我应该为 :hover 和 :active 状态添加一些不错的转换，虽然 :hover 工作得很好，但我似乎无法让 :active 按我想要的方式工作。

如果您看一下这个 fiddle ，您将更清楚地了解我要实现的目标: http://jsfiddle.net/number8pie/3BvhM/2/

正如您在 :hover 上看到的那样，有一个我认为看起来相当不错的不透明度过渡，但是当您单击链接时，我希望将 about_us.png 和 about_us_hover.png 设置为不透明度 0(使用过渡)和 about_us_active .png 保持可见。

这是 HTML:

<ul class="right"> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
  <li id="about-us">
    <a class="nav-link" href="#">
      <div class="icon-cont">
        <img class="top" src="http://s28.postimg.org/7u46xdbjd/about_us.png">
        <img class="middle" src="http://s28.postimg.org/mel9s76i1/about_us_hover.png">
        <img class="bottom" src="http://s28.postimg.org/bt1eg706h/about_us_active.png">
      </div>
      <span class="nav-text">about us</span>
    </a>
  <li id="products">
    <a class="nav-link" href="#"><span class="nav-text">products</span></a>
  <li id="the-team">
    <a class="nav-link" href="#"><span class="nav-text">the team</span></a>
  <li id="environment">
    <a class="nav-link" href="#"><span class="nav-text">environment</span></a>
  <li id="contact">
    <a class="nav-link" href="#"><span class="nav-text">contact</span></a>
</ul>

还有 CSS:

ul li {
  height: 56px;
  width: 56px;
  margin: 0;
  font-family: 'RobotoLight';
  font-size: 21px;
  display: inline-block;
  text-transform: uppercase;
}

.icon-cont {
  position: relative;
  height: 56px;
  width: 56px;
  margin: 0;
}

.icon-cont img {
  position: absolute;
  left: 0;
  -webkit-transition: opacity 0.4s ease-in-out;
  -moz-transition: opacity 0.4s ease-in-out;
  -o-transition: opacity 0.4s ease-in-out;
  transition: opacity 0.4s ease-in-out;
}

.icon-cont img.top {
  z-index: 30;
}

.icon-cont img.middle {
  z-index: 20;
}

.icon-cont img.bottom {
  z-index: 10;
}

.icon-cont img.top:hover {
  opacity: 0;
}

.icon-cont img.top:active {
  opacity: 0;
}

.icon-cont img.middle:active {
  opacity: 0;
}

.nav-text {
  font-size: 0;
  position: absolute;
  left: -1000px;
}

在此先感谢您的帮助和/或建议。

Answer 1

您可以使用一些 CSS 技巧来完成大部分工作 - 即依靠兄弟隐藏输入的 :checked 状态来控制 label 的外观。

要根据当前页面设置状态，您可能需要使用一些 JS 来识别页面，然后将合适的类应用于相关元素。

这将适用于开/关点击状态。如果您想要按下(鼠标按下)状态，您应该在代码中使用 button 元素而不是 anchor a 标签来应用 :active到。

Demo Fiddle

(alternate demo using a button and :active)

HTML

<input type='checkbox' id='menuItem' />
<label for='menuItem'>i</label>

CSS

input {
    display:none;
}
label {
    display:inline-block;
    height:50px;
    width:50px;
    line-height:50px;
    color:white;
    font-size:1.5em;
    font-style:italic;
    font-family:arial;
    background:lightgreen;
    text-align:center;
    position:relative;
    transition:all 200ms ease-in;
}
label:after {
    height:30px;
    width:30px;
    content:'';
    border:4px solid white;
    border-radius:100%;
    display:inline-block;
    position:absolute;
    left:6px;
    top:6px;
    opacity:0;
    transition:all 200ms ease-in;
}
label:hover:after {
    opacity:1;
}
input:checked+label {
    background:none;
    color:lightgreen;
}
input:checked+label:after {
    border-color:lightgreen;
}