修改 CSS Hover 超链接效果
Posted
技术标签:
【中文标题】修改 CSS Hover 超链接效果【英文标题】：Modify CSS Hover Hyperlink Effect 【发布时间】：2015-02-28 07:57:56 【问题描述】：我需要修改链接上的 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 以将“填充颜色”的相同效果应用于文本颜色而不是背景？ 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;
【问题讨论】：
对于如此含糊的解释和如此多的代码，我感到非常抱歉。希望您仍然可以提供帮助 你为什么决定在鼠标悬停时设置第二个跨度？你能不能只拥有一个并在悬停时更改它的背景和文本颜色？.btn1:hover span background: #1abc9c; color:red;
好吧，如果我删除第二个跨度，它就会停止工作:)（代码不是我的）
【参考方案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;
我正在利用-webkit-background-clip 和-webkit-text-fill-color，正如CSS Tricks 文章中所述。 Webkit 利用了 CSS3 属性，该属性剪切了文本并允许从后面显示颜色或图像。 据我所知，这只适用于 Webkit 浏览器。
然后，我使用linear-gradient 属性作为背景。其中 50% 是默认颜色，另外 50% 是悬停颜色。当您将鼠标悬停在 div 上时，背景会发生变化，从而呈现出用不同颜色填充的文本。
Here's the CodePen Demo
再一次，我只用 WebKit 测试了这个。如果使用带有透明文字的图片，也可以达到同样的效果。
【讨论】：
非常感谢，你是 CSS 之神！ :) 至少它适用于 chrome！ 我链接的文章有一些可能有用的后备选项。确保也通读它。很高兴我能帮上忙！【参考方案2】：我没有检查你想要做的所有事情，但是这个改变是有效的：
这里是 jsfiddle：http://jsfiddle.net/nq0s16q3/
.btn1:hover span
color: blue;
【讨论】：
好吧，我不会问我是否只需要一个简单的颜色过渡:) 链接的背景有一个特殊的悬停效果。我需要做同样的效果，但对于文本颜色本身，而不是它的背景。 jsfiddle.net/yakovenkodenis/ryfyhLk7 在这里。但它改变了背景。我需要以相同的方式更改文本颜色而不是背景 这会改变悬停时的文本颜色，就像你问的那样。 是的，我没有看到你所说的效果。我在悬停时看到颜色变化，但没有华丽的过渡。实际上，我现在正试图弄清楚这里是否有一些压倒一切的 CSS。 啊...他正在使用 CSS3 转换，但他的代码中只有moz 前缀，所以它在 Chrome 上没有动画。【参考方案3】：
在你的CSS中你有
.btn1 span:last of type
background: #1abc9c;
left: 100%;
你可以试试改成
.btn1:hover span
color: #1abc9c;
left: 100%;
【讨论】：
这并没有真正帮助。可能，我不清楚，对此感到抱歉。因此，有一个背景悬停效果（悬停时绿色从左到右开始）。我需要用文本而不是背景做出同样的效果。我希望它从左到右填充绿色（当您悬停链接时背景会发生什么）。 jsfiddle.net/yakovenkodenis/ryfyhLk7【参考方案4】：要更改 hover 上 a 元素文本的颜色，只需将 color 属性添加到 .btn1:hover span 选择器：
.btn1:hover span
left: 0;
color: red;
【讨论】：
以上是关于修改 CSS Hover 超链接效果的主要内容，如果未能解决你的问题，请参考以下文章