Question

我正在玩我的徽标并试图获得两个带有伪元素的悬停动画，我有一些结果，但有一些小故障（如果你将光标移动到徽标下方，字母和＃34; B＆＃ 34;，你会看到它，再次显示.logo a:after {content: "ogosavljev"}或者如果你想，如何避免这第二个div - 请分享它：）

或者使用jquery为它设置动画？

HTML：

<!DOCTYPE html>
<body>
<div class="wrap">    
    <div class="logo">
        <a href="/"><img src="http://s28.postimg.org/mqb5ghrwt/letter_B_blue_hover_me.png" /></a>
        <div class="front">
            <a href="/">front-end designer &amp; developer</a>
        </div>
    </div>
</div>
</body>

CSS：

@import url(http://fonts.googleapis.com/css?family=Francois+One);
@import url(http://fonts.googleapis.com/css?family=Arbutus+Slab);

html {
    font-family: 'Francois One', sans-serif;
    font-size:17px;
    line-height:1.5;
}

.wrap {
    margin: 0 auto;
    width: 960px;
}

.logo a {
    font-family: 'Francois One', sans-serif;
    color: white;
    display: block;
    position: relative;
    text-transform: uppercase;
    width: 650px;
}

.front a:after {
   color: #6FCCE1; 
}

.logo a:hover + .front a {
    font-family: 'Arbutus Slab', serif;
    background: none repeat scroll 0 0 transparent;
    color: #6FCCE1;
    transition-delay: 1.5s;
    transition: all 1s ease 0.6s;
    transform: translate(41%,-62px);
    text-decoration: none;
    text-transform: lowercase;
    font-size: 1.25rem;
    width: 650px;
}

.logo a:after {
    background: none repeat scroll 0 0 transparent;
    color: #71CCE2;
    content: "ogosavljev";
    display: inline-block;
    font-size: 4.5rem;
    height: 23px;
    opacity: 0;
    transform: translateY(0px);
    vertical-align: top;
}
.logo a span, .logo a:after {
    transition: all 0.2s ease 0s;
}

.logo a:hover:after, .logo a:focus:after {
    opacity: 1;
    transform: translate(-8%,-20px);
    transition-delay: 0.5s;
}

您可以在此fiddle

中看到示例

Answer 1

您可以使用data属性来访问伪类，例如

<a href="#" data-hover="some other text or font icons">some</a>

a:before{
   content: attr(data-hover);
}

所以你可以写＆＃34;前端设计师＆amp;显影剂＆＃34;并让他进入：之前

这是使用这种技术http://tympanus.net/Development/CreativeLinkEffects/

的很好的例子

当你在elem上悬停你的伪类获取你在其内容中设置的值时，你有两个应该显示的单词，在：之前将是＆＃34; ogosavljev＆＃34;并且：之后将是＆＃34;前端设计师＆amp;显影剂＆＃34;应该是elem的数据属性，所有其他都是关于位置那些类和动画的问题，好的luc

Answer 2

你可以使用 pointer-events （MDN），但它与IE11 +兼容，所以没有IE10 ...

但首先，如果添加大纲，问题的来源是可见的：http://jsfiddle.net/eLots246/2/
标语在光标和图像之间传递，因此.logo > a不再徘徊！

在标语上添加指针事件，并为光标添加不可见（排序）：http://jsfiddle.net/eLots246/3/

谨防caniuse.com：pointer-events有2个条目，相关的条目是HTML，而不是SVG;）

使用伪元素悬停时的动画徽标：之前和之后？

HTML：

CSS：

2 个答案: