我需要什么代码才能拥有这些按钮之一？ [关闭]答案

【问题标题】：What code do I take to have just one of these buttons? [closed]我需要什么代码才能拥有这些按钮之一？ [关闭]
【发布时间】：2012-06-19 01:05:50
【问题描述】：

我只想使用右边的按钮：

http://cssdeck.com/item/preview/343/css-text-switcher

我需要什么代码才能拥有那个按钮而不是第一个？因为所有的后代选择器，我都在挣扎..

【问题讨论】：

标签： css button hover css-selectors

【解决方案1】：

HTML（仅相关代码）：

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Want to learn more?</span>
        <span>Send us an email :)</span>
      </a>
    </li>
  </ul>
</nav>

CSS（仅相关代码）：

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 30px;
    margin: -15px 0 0 -160px;
    list-style: none;
    font: .75em "lucida grande", arial, sans-serif;
}

a {
    position: absolute;
    width: 150px;
    height: 100%;
    text-decoration: none;
}

a span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}

li a {
    overflow: hidden;
    right: 0;
    color: #fff;
}

li span {
    -webkit-transition: top .3s ease-out;
    -moz-transition: top .3s ease-out;
    -o-transition: top .3s ease-out;
    -ms-transition: top .3s ease-out;
    transition: top .3s ease-out;
}

li span:first-child {
    background: #333;
    top: 0;
}

li span + span {
    background: #39f;
    top: 30px;
}

li a:hover span:first-child {
    top: -30px;
}

li a:hover span + span {
    top: 0;
}

JSFiddle

【讨论】：

基本上所有li:first-child的东西都应该被删除（因为它专门指第一个按钮，而li + li应该只转换为li，因为我们现在只有一个按钮，而不是两个。然后我们可以从 HTML 中删除另一个按钮。

【解决方案2】：

HTML

<nav>
  <ul>
    <li>
      <a href="#">
        <span>Want to learn more?</span>
        <span>Send us an email :)</span>
      </a>
    </li>
  </ul>
</nav>

CSS

* {
    padding: 0;
    margin: 0;
}

ul {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 320px;
    height: 30px;
    margin: -15px 0 0 -160px;
    list-style: none;
    font: .75em "lucida grande", arial, sans-serif;
}

a {
    position: absolute;
    width: 150px;
    height: 100%;
    text-decoration: none;
}

a span {
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 30px;
}



li a {
    overflow: hidden;
    right: 0;
    color: #fff;
}

li span {
    -webkit-transition: top .3s ease-out;
    -moz-transition: top .3s ease-out;
    -o-transition: top .3s ease-out;
    -ms-transition: top .3s ease-out;
    transition: top .3s ease-out;
}

li span:first-child {
    background: #333;
    top: 0;
}

li span + span {
    background: #39f;
    top: 30px;
}

li a:hover span:first-child {
    top: -30px;
}

li a:hover span + span {
    top: 0;
}

【讨论】：

您的回答最大的问题是它缺少所有其他供应商前缀，例如 -webkit，它们存在于原始 CSS 中。
你说得对，我编辑了它。谢谢
关闭，但现在您不见了，例如 -ms-transition。标准属性transition 应该是最后一个，而不是第一个。只需从原始 CSS 中复制并粘贴相关规则即可。
@thirtydot: -ms-transition 已过时，但最好从原始 CSS 中复制相关规则。
这似乎不起作用jsfiddle.net/JXcB6

【解决方案3】：

我是这样做的：http://cssdeck.com/t/uHhhprW6

【讨论】：