Databases
StackOverflow2013
Postsdbo
POHow do I change the z-index of a div when the user mouses over it?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I change the z-index of a div when the user mouses over it?
    text
    copied!<p>I'm currently trying to create buttons which are in the form of loosely stacked polaroid pictures and I would like to get which ever polaroid the user mouses over to come to the top of the pile.</p> <p>I have tried to achieve this with a simple:</p> <pre><code>#polaroid a hover{ z-index:15; } </code></pre> <p>I thought that this could, theoretically, bring the polaroid to the top of the pile, as the current "highest" polaroid is z-index:13;</p> <p>However, this doesn't work at all, I think I'm doing something wrong and may require some javascript to achieve this.</p> <p>My current code is...</p> <pre><code>HTML &lt;a id="polaroid_home" href="index.html"&gt;&lt;/a&gt; &lt;a id="polaroid_about" href="index.html"&gt;&lt;/a&gt; &lt;a id="polaroid_portfolio" href="index.html"&gt;&lt;/a&gt; &lt;a id="polaroid_contact" href="index.html"&gt;&lt;/a&gt; </code></pre> <p>I've set all these to link to index.html just to test.</p> <pre><code>CSS #polaroid_home{ position:absolute; width:175px; height:215px; left:670px; top:140px; background-image:url(../Images/polaroid-home.png); background-repeat:no-repeat; z-index:13; } #polaroid_home a:hover{ z-index:15; } #polaroid_about{ position:absolute; width:175px; height:215px; left:765px; top:175px; background-image:url(../Images/polaroid-about.png); background-repeat:no-repeat; z-index:12; } #polaroid_about a:hover{ z-index:15; } #polaroid_portfolio{ position:absolute; width:175px; height:215px; left:620px; top:255px; background-image:url(../Images/polaroid-portfolio.png); background-repeat:no-repeat; z-index:10; } #polaroid_portfolio a:hover{ z-index:15; } #polaroid_contact{ position:absolute; width:210px; height:235px; left:740px; top:310px; background-image:url(../Images/polaroid-contact.png); background-repeat:no-repeat; z-index:11; } #polaroid_contact a:hover{ z-index:15; } </code></pre> <p>I'm using JavaScript elsewhere on the page and am using this:</p> <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt; </code></pre> <p>I have no knowledge of how to use JavaScript, so I put that just incase it is important.</p> <p>Have I done something obviously wrong or does this method just not work?</p> <p>Are there any ways I can achieve this through CSS and if not, what would the JavaScript for it be?</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