Question

我想只使用右边的按钮：

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

我只需要使用该按钮而不是第一个按钮？我因为所有后代选择器而苦苦挣扎..

Answer 1

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

Answer 2

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

Answer 3

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

我只使用其中一个按钮代码是什么？

3 个答案: