2

我只想使用右侧的按钮：

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

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

4

3 回答 3

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;
}
于 2012-06-15T23:53:09.277 回答
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 ​</p>

于 2012-06-17T05:15:38.613 回答
0

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

于 2012-06-17T23:12:46.040 回答