我想知道是否有人可以帮助我/如果可能的话。
我正在尝试将youtube字体超赞图标的样式设置为一半（使用halfstyle.js），以使该图标类似于youtube徽标（底部为半红色，顶部为半白色）
我想在悬停时执行此操作，但我什至似乎都无法默认执行此操作。
body {
background: rgba(0,0,0,.4);
}
.fa {
font-size: 10em;
color: white;
}
.fa-youtube {}
.halfStyle {
position:relative;
display:inline-block;
font-size:80px; /* or any font size will work */
color: transparent; /* hide the base character */
overflow:hidden;
white-space: pre; /* to preserve the spaces from collapsing */
}
.halfStyle:before { /* creates the top part */
display:block;
z-index:2;
position:absolute;
top:0;
height: 50%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #f00; /* for demo purposes */
text-shadow: 2px -2px 0px #af0; /* for demo purposes */
}
.halfStyle:after { /* creates the bottom part */
display:block;
position:absolute;
z-index:1;
top:0;
height: 100%;
content: attr(data-content); /* dynamic content for the pseudo element */
overflow:hidden;
pointer-events: none; /* so the base char is selectable by mouse */
color: #000; /* for demo purposes */
text-shadow: 2px 2px 0px #0af; /* for demo purposes */
}<i class="fa fa-youtube textToHalfStyle"></i>您不能对FontAwesomei.fa图标执行此操作，因为HalfStyle已经基于::after和::before伪元素。另外，FontAwesome也:after用于此目的。您需要创建另一个元素并提供:hover实现此目的的选项。
片段
$(function () {
$(".textToHalfStyle").each(function () {
$(this).parent().append('<div class="cloned"></div>');
$(".cloned").append($(this).clone());
});
});body {
background: rgba(0,0,0,.4);
font-size: 160px;
}
.fa {
color: #fff;
}
.cloned {
opacity: 0;
position: absolute;
display: block;
z-index: 1;
left: 8px;
top: 76px;
height: 0.65em;
overflow: hidden;
}
.cloned .fa {
position: relative;
top: -68px;
color: #f00;
}
.fa:hover ~ .cloned,
.cloned:hover {
opacity: 1;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<i class="fa fa-youtube textToHalfStyle"></i>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句