StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>The nature of the <code>:hover</code> css selector is that it only applies when the hover is happening on the source element. So the reverse is triggered when the user no longer hovers because the <code>:hover</code> no longer applies. There are two ways to achieve what you want:</p> <ol> <li><p>Use animations instead. Animations have <code>animation-fill-mode</code>, which when set to <code>forwards</code> causes an element to retain it's computed values set by the last keyframe encountered during execution. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode" rel="nofollow">MDN has more info about it</a>.</p> <p>Here's how you'd do it in your CSS:</p> <pre><code>#gun:hover ~ #star { -webkit-animation: rotate 4s forwards; animation: rotate 4s forwards; } @-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 100% { transform: rotate(360deg); } } </code></pre> <p><strong>Demo:</strong> <a href="http://jsfiddle.net/FPCMt/" rel="nofollow">http://jsfiddle.net/FPCMt/</a></p></li> <li><p>If you don't want to use animations, you need to write some JavaScript. Use the <code>hover</code> event, because events don't depend on current state like <code>:hover</code> does. You will also notice I moved the <code>transition-delay</code> css to <code>#star</code>, as it can apply to that element the whole time to no effect. I've used jQuery for succinctness:</p> <p><strong>JavaScript:</strong></p> <pre><code>$('#gun').hover(function() { $('#star').css('transform', 'rotateZ(340deg)'); }); </code></pre> <p><strong>CSS:</strong></p> <pre><code>#star { width: 50px; -webkit-transition: all 4s ease-out; -moz-transition: all 4s ease-out; -o-transition: all 4s ease-out; -ms-transition: all 4s ease-out; transition: all 4s ease-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -o-transition-delay: 1s; -ms-transition-delay: 1s; transition-delay: 1 } </code></pre> <p><strong>Demo:</strong> <a href="http://jsfiddle.net/FPCMt/4/" rel="nofollow">http://jsfiddle.net/FPCMt/4/</a></p> <p><strong>--OR--</strong></p> <p>You can achieve this with vanilla JavaScript too. I used a CSS class I called <code>shot</code> to apply the transform, since we are lacking jQuery's cross-browser help and it is cleaner that way:</p> <p><strong>JavaScript:</strong></p> <pre><code>var gun = document.getElementById('gun'); var star = document.getElementById('star'); gun.onmouseover = function () { star.className = 'shot'; }; </code></pre> <p><strong>CSS:</strong> (in addition to CSS from jQuery example)</p> <pre><code>#star.shot { -webkit-transform:rotateZ(340deg); -moz-transform:rotateZ(340deg); -o-transform:rotateZ(340deg); -ms-transform:rotateZ(340deg); transform:rotateZ(340deg); } </code></pre> <p><strong>Demo:</strong> <a href="http://jsfiddle.net/FPCMt/6/" rel="nofollow">http://jsfiddle.net/FPCMt/6/</a></p></li> </ol>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload