Effect How to - Hover to change the z-index

Question

We would like to know how to hover to change the z-index.

Answer


<html>
<head>
   <style type="text/css">
    .placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
    .placeholder:hover { z-index:-1; }<!--from w w w .j a va2  s  .c  o m-->
    .over { position:absolute; z-index:1;}
   </style>
</head>

<body style="margin: 0px; width: 520px;">

    <div>
        <div class="placeholder"></div>
        <a class="over"><img src="http://www.java2s.com/style/download.png" class="pic1"></a>
    </div>

</body>
</html>

The code above is rendered as follows: