StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If you're trying to do the hover thing on all elements that have the class "class", then:</p> <pre><code>$('.class').hover(function() { $(this).toggleClass("hoverclass"); }); </code></pre> <p><a href="http://jsbin.com/icixu4" rel="nofollow">Live example</a></p> <p>Changes from yours:</p> <ul> <li>It's not a string. I'm not sure where your quote came from, but I'm thinking it was an HTML attribute. You would just put this somewhere during page load, like within a <a href="http://api.jquery.com/ready/" rel="nofollow"><code>ready</code></a> handler.</li> <li>You don't include the leading dot when you're calling <code>addClass</code> / <code>removeClass</code> / <code>toggleClass</code>. The dot isn't part of the class name.</li> <li>May as well use <code>toggleClass</code>, since that's what it's for.</li> </ul> <p>Possibly worth mentioning that you don't need jQuery or JavaScript for this unless you need to support IE6. CSS already has this, the <code>:hover</code> pseudo-class. So you can put your styles there rather than in a separate <code>hoverClass</code>, e.g.:</p> <pre><code>.class:hover { text-decoration: underline; color: blue; } </code></pre> <p>...would turn an element with class "class" blue with an underline when the mouse was over it.</p> <p><a href="http://jsbin.com/icixu4/2" rel="nofollow">Live example</a></p> <p>In IE6 this only works on <code>a</code> elements; in IE7 upward and nearly all other browsers, it works on all elements.</p> <hr> <p><strong>Edit</strong>: In your note below, you say you only want to do this to one element (at least, I think that's what you're saying). You can do that by uniquely-identifying the element — either by where it is, or by using an <code>id</code> attribute. So for instance, to only do this for the element with the <code>id</code> "foo":</p> <pre><code>$('#foo').hover(function() { $(this).toggleClass("hoverclass"); }); </code></pre> <p><a href="http://jsbin.com/icixu4/3" rel="nofollow">Live example</a></p> <p>(And that holds for the CSS solution as well:</p> <pre><code>#foo:hover { /* ...style rules here... */ } </code></pre> <p><a href="http://jsbin.com/icixu4/4" rel="nofollow">Live example</a></p>

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