Databases
StackOverflow2013
Postsdbo
POmouseover only on one element (same class)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmouseover only on one element (same class)
    text
    copied!<p>I'm having problem making a color change &amp; image change on mouseover(using Jquery, or using CSS if possible it doesnt metter), but I've a problem that only the first element get change, or all of them (using the ID/CLASS for every element for deisgn), now this is my html, and CSS for my design</p> <p>CSS:</p> <pre><code>#button_id { margin: 5px; display: block; } #button_nav { display: inline; } #button_img { background-image: url('images/left_nav_button.gif'); width: 11px; height: 11px; float: left; } </code></pre> <p>HTML:</p> <pre><code>&lt;div id="button_id" class="button_id"&gt; &lt;div id="button_nav"&gt; &lt;div id="button_img" class="button_img"&gt;&lt;/div&gt; &lt;div id="button_name" class="button_name"&gt;Employment &amp; skills&lt;/div&gt; &lt;div id="clear"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>I tried using jQuery like this:</p> <pre><code>$(".button_id").mouseover(function() { $("#button_img").css('background-image', 'url(images/left_nav_button_hover.gif)'); $(".button_id").css('color','#0365b9'); }).mouseout(function() { $(".button_img").css('background-image', 'url(images/left_nav_button.gif)'); $(".button_id").css('color','#8C8C8C'); }); </code></pre> <p>I tried to play with it and I got into 2 situations:</p> <ol> <li>When everyone get a color changed + the background-image</li> <li>Only the first div ( id="button_id" class="button_id" ) got change.</li> </ol> <p>I tried, to switch and play with the class/id but couldn't solve it, I also tried using <code>$("#this")</code> it worked only with the color (because the image is other div, I also tried to use .children but I wasn't sure how to set it on other div, I tried something like</p> <pre><code>$(this).children(("#element")).css(..) </code></pre> <p>but it didn't work :(</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