Question

亲爱的Stackoverflow读者，

仅使用CSS3，有没有办法在转换完成后更改div的文本？

我可以在此处查看我的代码段：

HTML

<div class="biography">
    <p>Hover For Player Info</p>
</div>

CSS3

.biography {
    width: 100px;
    height: 60px;
    float: left;
    margin: 5px;
    background: #3399FF;
    color: #ffffff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    right: 5%;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    opacity: 0.4;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
}
.biography:hover {
    width: 350px;
    height: 450px;
    margin: 10px 10px 0px -200px;
    opacity: 1;
    background: #7C7C7C;
}

JSFiddle

转换后，我想更改＆＃34; Hover For Player Info＆＃34;到＆＃34;玩家信息＆＃34;。

接下来，我需要它改回＆＃34; Hover For Player Info＆＃34;一旦鼠标不再盘旋在div上。

如果没有办法，我需要学习哪些技能才能达到我想要的目标？

提前致谢！

Answer 1

使用jQuery：

$('.biography').hover(function(e) {
    $(this).html('Player Info');
}, function(e) {
    $(this).html("Hover for Player Info");
});

JSFiddle Demo

Answer 2

这可以使用:after

单独在CSS中完成

.biography:after{
    content:'Hover for player info';
}
.biography:hover:after{
    content:'Player Info';
}

在.biograhpy悬停时，内容会发生变化，不需要JS！ JSFiddle Demo

Answer 3

@Tony你好。 :)我希望你的项目进展顺利。

@Faiz为您提供了一个很好的解决方案，但它会在悬停时更改文本，而不是在动画完成时更改（正如您在原始问题中所要求的那样）。如果他的解决方案适合你，真棒;如果您仍希望在转换完成时更改文本，则下面是以下代码，这里是基于Faiz上面给出的working jsFiddle。

$('.biography').on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(e) {
    if ($(e.target).css('opacity') == 1) { // or any other style from the "hover" form
        $(".player-info-msg").html('Player Info');
    } else {
        $(".player-info-msg").html('Hover for Player Info');
    }
});

如果您决定实施此问题，请告诉我，如果您有任何其他问题，请与我们联系。

编辑：如果您想了解有关此活动的更多信息，请参阅Mozilla docs。如果你想了解更多有关jQuery，Javascript等的信息，@ Faiz给你的所有资源都很棒。

Answer 4

使用onTransitionEnd事件有很大帮助过渡和动画将事件事件附加到dem

转换完成后更改文本的方法？

4 个答案: