Databases
StackOverflow2013
Postsdbo
POHover over one div, effect the opacity of an image in another div (with jquery)
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHover over one div, effect the opacity of an image in another div (with jquery)
    text
    copied!<p>I'm working on this website: <a href="http://users.telenet.be/blijvendvertrek/default.htm" rel="nofollow">http://users.telenet.be/blijvendvertrek/default.htm</a>.</p> <p>Now I want to establish that when I hover over one of three navigation items, ('Renovaties', 'Gerechtelijke expertise' or 'Over mij') located in a , the corresponding image in the right below it changes its opacity (from 0.6 to 1.0). </p> <p>Via CSS, I have already established that each of those three images changes its opacity if you hover over it directly, but I can't seem to generate the same effect when I hover over the navigation items. I've inserted a script to achieve this effect, but it doesn't work.</p> <p>This is the html for one of the three navigation items:</p> <pre><code>&lt;div id="navigation"&gt; &lt;ul&gt; &lt;li id="1"&gt;&lt;a href="renovaties/renovaties.htm" title="Renovaties"&gt;RENOVATIES&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>This is the html for the corresponding content item:</p> <pre><code>&lt;div id="content"&gt; &lt;div class="kolom links"&gt; &lt;a href="renovaties/renovaties.htm" title="Renovaties"&gt; &lt;img src="images/Icoon - Renovaties.png" alt="Renovaties" id="img-1"/&gt;&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>And this is the script I can't get to work:</p> <pre><code>$("#img-1, #img-2, #img-3").css('opacity','0.6'); $("#1").hover(function () { $('#img-1').css({opacity : 1.0}); }, function () { $('#img-1').css({opacity : 0.6}); } ); $("#2").hover(function () { $('#img-2').css({opacity : 1.0}); }, function () { $('#img-2').css({opacity : 0.6}); } ); $("#3").hover(function () { $('#img-3').css({opacity : 1.0}); }, function () { $('#img-3').css({opacity : 0.6}); } ); </code></pre> <p>Any ideas on what I'm doing wrong? Thank you all very much.</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