Dear Stackoverflow readers,
Using only CSS3 , is there any way to change the text of a div after the transition is completed?
My code snippet can be viewed here:
HTML
<div class="biography"> <p>Hover For Player Info</p> </div>
.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; }
After the transition, I want to change "Hover For Player Info" to "Player Info".
Continuing on that, I need it to change back to "Hover For Player Info" once the mouse is no longer hovering over the div.
If there's no possible way, what skills do I need to learn to achieving what I want?
Thanks in advance!
Problem courtesy of: Tony
Using jQuery:
$('.biography').hover(function(e) { $(this).html('Player Info'); }, function(e) { $(this).html("Hover for Player Info"); });
Solution courtesy of: Faiz Ahmed
@Tony Hello again. :) I hope your project is going well.
@Faiz has given you a good solution, but it changes the text on hover, not when the animation is complete (as you asked for in your original question). If his solution works for you, awesome; if you still want the text to change when the transition is complete, here's the code for that below and here's a working jsFiddle based off the one Faiz gave above.
$('.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'); } });
Let me know if you have any problems if you decide to implement this, and let me know if you have any further questions.
EDIT: If you want to read up more on this event, see the Mozilla docs . If you want to know more about jQuery, Javascript, etc. all of the resources @Faiz gave you are great.
Discussion courtesy of: Ryan Mitchell
This can be done in CSS alone using :after
:
.biography:after{ content:'Hover for player info'; } .biography:hover:after{ content:'Player Info'; }
On .biograhpy
hover, the content changes, and no JS is required!
Discussion courtesy of: Jacob Gray
Using the onTransitionEnd event helps a lot Transition and animation have events event attached to dem
Discussion courtesy of: Toye_Brainz
This recipe can be found in it's original form on Stack Over Flow .
我来评几句
登录后评论已发表评论数()