Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>why not? simply create a rule for the <code>hover</code> state by specifying a pseudo class in your CSS:</p> <pre class="lang-css prettyprint-override"><code>#grad { background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%); } #grad:hover { background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%); } </code></pre> <p>if you wish to follow the DRY principle, create those rules as helper classes, than attach and detach them to the element. here's an example using jQuery:</p> <p><strong>CSS:</strong></p> <pre class="lang-css prettyprint-override"><code>.grad { background-image: linear-gradient(bottom, rgb(23,125,250) 28%, rgb(0,0,0) 80%); } .grad-rotated { background-image: linear-gradient(right , rgb(23,125,250) 28%, rgb(0,0,0) 80%); } </code></pre> <p><strong>JS:</strong></p> <pre class="lang-js prettyprint-override"><code>$('.grad').hover( function() { $(this).toggleClass('grad', false).toggleClass('grad-rotated', true); }, function() { $(this).toggleClass('grad', true).toggleClass('grad-rotated', false); } ); </code></pre> <p><strong>References:</strong></p> <ul> <li><a href="http://api.jquery.com/hover/" rel="nofollow">jQuery's <code>hover()</code></a></li> <li><a href="https://developer.mozilla.org/en/CSS/linear-gradient" rel="nofollow"><code>linear-gradient</code> on Mozilla Developer Network</a></li> <li><a href="http://gradients.glrzad.com/" rel="nofollow">a nice, easy to use, CSS gradients generator</a></li> </ul> <p><em><strong>Note:</strong> for convenience, only the basic form of the <code>linear-gradient</code> property value is shown here, to provide cross-browser compatibility, add the vendor-specific prefixed property values (e.g. <code>-o-linear-gradient</code>, <code>-moz-linear-gradient</code>).</em></p> <p><em><strong>Disclaimer:</strong> as user-agents will render CSS more efficiently, in general it's best to prefer CSS based solutions over JS based.</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

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