修改CSS悬停超链接效果

Question

我需要修改 link 上的 css 悬停效果。这是我的 HTML 代码：

<body>
    <div class="button-holder">
        <div class="center-content">
            <a href="#" class="btn1">
                <span> Some Link </span>
                <span> </span>
            </a>
        </div>
    </div>
</body>

因此，css 效果适用于 link 的背景。如何修改我的 css 以将 'filling with color' 的相同效果应用于文本颜色而不是背景？ http://jsfiddle.net/yakovenkodenis/ryfyhLk7/ 这是所需的效果，但它改变了背景，而不是文本本身。这是我的 css 代码：

body {
    padding: 100px;
    text-align: center;
}
a {
    color: #444;
    display: inline-block;
    font-size: 30px;
    letter-spacing: .1em;
    margin: 100px 0;
    padding: 1em 2em;
    text-decoration: none;
}
.button-holder > div > div, .button-holder > div > a {
  -moz-box-sizing: border-box;
  display: block;
  float: left;
  font-size: 2em;
  height: 52px;
  margin: 80px;
  padding: 10px 30px;
  position: relative;
  width: 100%;
}
.center-content {
  width: 840px;
  margin: 0px auto;
}
.button-holder div a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.7);
}
.btn1 span {
    -moz-box-shadow: none;
    -moz-transform-origin: 0 0;
    -moz-transform-style: preserve-3d;
    -moz-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
    display: block;
    left: 0;
    opacity: 1;
    padding: 9px 0;
    position: absolute;
    top: 0;
    text-align: center;
    color: #444;
    box-shadow: none;
}
.btn1 { 
  overflow: hidden;
}
.btn1 span {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  left: 0;
  top: 0;
  -moz-box-sizing: border-box;
  padding: 9px 0;
  text-align: center;
  -moz-transform-style: preserve-3d;
  -moz-transform-origin: 0 0;
  -moz-transition: all 0.6s cubic-bezier(0.05, 0.06, 0.05, 0.95);
  box-shadow: none;
  color: #444;
}
.btn1 span:first-of-type {
  z-index: 99999;
}
.btn1 span:last-of-type {
  background: #1abc9c;
  left: -100%;
}
.btn1:hover span {
  left: 0;
}

Answer 1

要在悬停上更改 a 元素文本的颜色，只需将 color 属性添加到您的 .btn1:hover span 选择器：

.btn1:hover span { left: 0; color: red; }

Answer 2

我没有检查你正在尝试做什么，但这个改变有效：

这里是 jsfiddle：http://jsfiddle.net/nq0s16q3/

.btn1:hover span {
  color: blue;
}

Answer 3

在你的 css 你有

.btn1 span:last of type {
  background: #1abc9c;
  left: 100%;
}

你可以试试改成

.btn1:hover span {
  color: #1abc9c;
  left: 100%;
}

Answer 4

好的，到目前为止，这不是一个完美的解决方案，但它展示了我正在做的事情背后的原则。

这很难，因为 CSS 不能让我们控制 indiv idual 字符。最简单的方法是使文本本身透明，然后使用 CSS3 动画来更改 background-color。 Webkit 浏览器有一种方法可以单独在代码中执行此操作，但作为后备方案，您需要使用 JavaScript 或带有透明文本的图形。

代码：

<div id="outer">
  <p>Some link</p>
</div>

#outer {
  background:linear-gradient(to right, #1abc9c 50%, #444 50%);
  background-size:200% 100%;
  background-position:right bottom;
  font-size:64px;
  text-align:center;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:all 1s ease;
}
#outer:hover {
  background-position:left  bottom;
  cursor:pointer;
}

我正在利用 -webkit-background-clip 和 -webkit-text-fill-color，如这篇 CSS Tricks 文章中所述。 Webkit 利用 CSS3 属性剪切文本并允许显示颜色或后面的图像。 据我所知，这只适用于 Webkit 浏览器。

然后，我用了linear-gradient 属性做背景。其中 50% 是默认颜色，另外 50% 是您的悬停颜色。当您将鼠标悬停在 div 上时，背景会发生变化，使文本看起来像填充了不同的颜色。

Here's the CodePen Demo

同样，我只使用 WebKit 对此进行了测试。如果使用带有透明文字的图片，也可以达到同样的效果。

修改CSS悬停超链接效果

Modify CSS Hover Hyperlink Effect

html

css

hover

transition

Here's the CodePen Demo