Databases
StackOverflow2013
Postsdbo
POjQuery CSS hover using variable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery CSS hover using variable
    text
    copied!<p>How can I pass a previously captured variable into a background property using jQuery? I'm working with a very large table, a lot of cells and a lot of data. There are multiple colors being used, being applied to the table rather than the cell (with good reason).</p> <p>Here is my code (greatly condensed HTML)</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td class="nonLevel"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td class="block"&gt;&lt;a href="#"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/a&gt;&lt;/td&gt; &lt;td class="block"&gt;&lt;a href="#"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/td&gt; &lt;td class="block"&gt;&lt;a href="#"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/a&gt;&lt;/td&gt; &lt;td class="block"&gt;&lt;a href="#"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/a&gt;&lt;/td&gt; &lt;td class="block"&gt;&lt;a href="#"&gt;&lt;ul class="list"&gt;&lt;li&gt;text to go here&lt;/li&gt;&lt;/ul&gt;&lt;/a&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; $(".block").hover(function () { var myColor = $(this).css("background-color"); $(this).css({'background-color' : 'yellow'}); }, function () { var cssObj = { 'background-color' : myColor, } $(this).css(cssObj); }); </code></pre> <p>So I'm trying to capture the original color on rollover (which works when I pass the <code>myColor</code> variable into an alert), then change the color to yellow and then on rollout switch back to 'myColor'.</p> <p>I've looked at <code>addClasss</code> and <code>removeClass</code>, but they don't seem to cut it in terms of how this is set up. Again, the background color is set in CSS on the table, not the cell, this can't be changed.</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