修改CSS悬停超链接效果
Modify CSS Hover Hyperlink Effect
我需要修改 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;
}
要在 悬停 上更改 a 元素文本的颜色,只需将 color
属性 添加到您的 .btn1:hover span
选择器:
.btn1:hover span {
left: 0;
color: red;
}
我没有检查你正在尝试做什么,但这个改变有效:
这里是 jsfiddle:http://jsfiddle.net/nq0s16q3/
.btn1:hover span {
color: blue;
}
在你的 css 你有
.btn1 span:last of type {
background: #1abc9c;
left: 100%;
}
你可以试试改成
.btn1:hover span {
color: #1abc9c;
left: 100%;
}
好的,到目前为止,这不是一个完美的解决方案,但它展示了我正在做的事情背后的原则。
这很难,因为 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 对此进行了测试。如果使用带有透明文字的图片,也可以达到同样的效果。
我需要修改 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;
}
要在 悬停 上更改 a 元素文本的颜色,只需将 color
属性 添加到您的 .btn1:hover span
选择器:
.btn1:hover span {
left: 0;
color: red;
}
我没有检查你正在尝试做什么,但这个改变有效:
这里是 jsfiddle:http://jsfiddle.net/nq0s16q3/
.btn1:hover span {
color: blue;
}
在你的 css 你有
.btn1 span:last of type {
background: #1abc9c;
left: 100%;
}
你可以试试改成
.btn1:hover span {
color: #1abc9c;
left: 100%;
}
好的,到目前为止,这不是一个完美的解决方案,但它展示了我正在做的事情背后的原则。
这很难,因为 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 对此进行了测试。如果使用带有透明文字的图片,也可以达到同样的效果。