Question

我想知道是否有人可以帮助我/如果有可能的话。

我尝试使用youtube font-awesome图标的一半样式（使用halfstyle.js），以便图标像youtube徽标（下半部分红色，上半部分白色）

我想在悬停时这样做，但我似乎甚至无法将此作为默认设置。

JSFiddle

＆＃13;

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 */
}

＆＃13;

<i class="fa fa-youtube textToHalfStyle"></i>

＆＃13;

Answer 1

您不能对FontAwesome i.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>

字体真棒与半风格CSS

1 个答案: