Question

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

我认为我会在：hover和：active状态中添加一些不错的过渡，而且：hover工作得很好，我似乎无法让：active可以按我的意愿工作。

如果你看一下这个小提琴，你会更清楚地知道我想要达到的目的： http://jsfiddle.net/number8pie/3BvhM/2/

正如你所看到的：悬停有一个不透明度过渡，我认为看起来相当不错，但当你点击链接我想要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来识别页面，然后将适当的类应用于相关元素。

这适用于开/关点击状态。如果您想要一个压缩（mousedown）状态，则应该在代码中使用button元素而不是锚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;
}

Answer 2

这里使用的是javascript。我在链接onmousedown上添加了一个类，并使用它来添加活动样式。我使用普通的js，因为我不确定你是否正在使用jQuery或其他一些DOM操作库。代码在这里：

http://jsfiddle.net/John_C/xsdnL/3/

var navLinks = document.getElementsByClassName('nav-link');
Array.prototype.forEach.call(navLinks, function(link) {
    link.addEventListener("mousedown", function(){
        this.className += " active";    
    }, false);
    link.addEventListener("mouseup", function(){
        this.className = "nav-link";    
    }, false);
});

3单击问题时的图像转换不透明度

2 个答案:

Demo Fiddle