在悬停时使用伪元素动画徽标：before 和 :after?答案

【问题标题】：Animate logo on hover with pseudo elements :before and :after?在悬停时使用伪元素动画徽标：before 和 :after?
【发布时间】：2014-11-28 17:50:49
【问题描述】：

我玩弄了我的标志并试图获得两个带有伪元素的悬停动画，我得到了一些结果，但有一些小故障（如果你将光标移动到标志下方一点，字母“B”，你会看到它），再次显示.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看到的例子

【问题讨论】：

标签： jquery css animation hover transitions

【解决方案1】：

你可以使用 data 属性通过你的伪类来访问他，例如

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

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

所以你可以写“前端设计师和开发人员”并让他进入：before

这是一个很好的例子，它使用了这种技术http://tympanus.net/Development/CreativeLinkEffects/

当您将鼠标悬停在元素上时，您的伪类会获取您在其内容中设置的值，因此您应该显示两个单词，in:before 将是“ogosavljev”，in:after 将是“front-end设计师和开发人员”应该在元素的数据属性中，所有其他都是关于定位这些类和动画的问题，好运气

【讨论】：

感谢您提供的精彩示例，我会检查一下！

【解决方案2】：

您可以使用 pointer-events (MDN) 但它与 IE11+ 兼容，因此没有 IE10...

但首先，如果添加轮廓，则问题的根源是可见的：http://jsfiddle.net/eLots246/2/
标语在光标和图像之间传递，因此.logo > a 不再悬停！

在标语上添加指针事件，它是 invisible 的光标（有点）：http://jsfiddle.net/eLots246/3/

当心 caniuse.com ：pointer-events 有 2 个条目，相关的是 HTML，而不是 SVG ;)

【讨论】：

您说的有道理，但您有解决方案或其他方法吗？
This is a solution，适用于 IE11+，如我的回答中所链接和说明的那样
@FelipeAls 你能检查一下并建议我如何实现它。 stackoverflow.com/questions/66923436/…