Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I assume you meant to write <code>mouseout</code> on the second mouse event.</p> <p>This bit of script will work if you always keep the <code>SpriteN</code> class name last in the list.</p> <pre><code> $(".MenuItem").mouseover(function() { var $this = $(this); // Get current class names and append 'Dis'. $this.attr('class', $this.attr('class') + "Dis"); }); $(".MenuItem").mouseout(function() { var $this = $(this); // Get current class names and remove 'Dis'. $this.attr('class', $this.attr('class').replace('Dis', '')); }); </code></pre> <p>Although it looks to me that all you want is a hover effect. Why not use the pseudo-class <code>:hover</code> like this:</p> <pre><code>.Sprite1:hover { } .Sprite2:hover { } </code></pre> <p>It won't work in IE6 as it's on a <code>div</code> element, which might be why you want to use jQuery. </p> <p><strong>Edit to clarify how it works</strong></p> <p><em>Mouse over:</em><br> First I get the value of the class attribute with <code>$this.attr('class')</code> which will return a string of <code>MenuItem Sprite1</code>. If you append this string with 'Dis' you get <code>MenuItem Sprite1Dis</code>. And that is exactly what you wanted. Now I put this string back to the <code>class</code> attribute and we're ready.</p> <pre><code>$this.attr('class', $this.attr('class') + "Dis"); </code></pre> <p><em>Mouse out:</em><br> Like previous event we retrieve the current class attribute value by <code>$this.attr('class')</code>, and it returns <code>MenuItem Sprite1Dis</code> like expected. What we want to do is remove the Dis part of the string. We can do that by doing a simple <code>replace</code> of 'Dis' to '' (nothing).</p> <pre><code>$this.attr('class', $this.attr('class').replace('Dis', '')); </code></pre>
    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