Here's the CodePen Demo

Question

我需要修改链接上的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效果适用于链接的背景。如何修改我的CSS以应用与填充颜色相同的效果＆＃39;文本颜色而不是背景？ 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

好吧，到目前为止，这不是一个完美的解决方案，但它证明了我所做的事情背后的原则。

这很难，因为CSS并没有让我们控制个别角色。最简单的方法是使文本本身透明，然后使用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;
}

我正在利用此CSS Tricks文章中解释的-webkit-background-clip和-webkit-text-fill-color。 Webkit利用了CSS3属性，该属性可以删除文本，并允许显示后面的颜色或图像。 据我所知，这仅适用于Webkit浏览器。

然后，我使用linear-gradient属性作为背景。 50％是默认颜色，另外50％是你的悬停颜色。当您将鼠标悬停在div上时，背景会移动，从而使文本的外观填充不同的颜色。

Here's the CodePen Demo

同样，我只用WebKit对此进行了测试。如果您使用带有透明文本的图像，则可以达到相同的效果。

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

要更改悬停上 a 元素文字的颜色，只需向color选择器添加.btn1:hover span媒体资源：

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

修改CSS悬停超链接效果

4 个答案:

Here's the CodePen Demo