.stayhovered behavior

Hovered div reveals divs where selected classes paired with .stayhovered maintain visible until a different div is hovered.

by Ken Watanabe

HTML

<div class="pagewrap">

    <br/><br/><br/><br/><br/><br/>
<div class="show" id="subject01">
    <img src="http://i57.tinypic.com/2i9p8go.jpg" width="400px" height="auto" alt="" />
    <div class="caption01">001</div>
    <div class="targetDiv info01">
        <div class="topleft">1</div>
        <div class="topright">2</div>
        <div class="bottomleft">3</div>
        <div class="bottomright">
            <img src="http://i57.tinypic.com/20krwa9.jpg" width="100px" alt="" />
            Image Caption
        </div>
    </div> <!-- END | 01 target -->
</div> <!-- END | 01 show -->
<br/><br/><br/>

<div class="show" id="subject02">
    <img src="http://i61.tinypic.com/282e1oo.jpg" width="250px" height="auto" alt="" />
    <p class="caption">002</p>
    <div class="targetDiv info02">
        <div class="topleft">1</div>
        <div class="topright">2</div>
        <div class="bottomleft">3</div>
        <div class="bottomright">4</div>
    </div> <!-- END | 02 target -->
</div> <!-- END | 02 show -->
    <br/><br/><br/><br/><br/><br/>
</div>

CSS

body {
    font: 13px/17px 'Helvetica Neue', Arial, Helvetica, Geneva, sans-serif;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    }
    
    .pagewrap {
    width: 50%;
    height: 100%;
    }
    
    p.caption {
        font-size: 20px;
        text-align: center;
        width: auto;
    }
    
    .topleft {
    top:2%;
    left:2%;
    }
    
    .topright {
    top:2%;
    right:2%;
    }
    
    .bottomleft {
    bottom:2%;
    left:2%;
    }
    
    .bottomright {
    bottom:2%;
    right:2%;
    }
    
    
    /* Subjects */
    
    /*
    #subject01 {
    left: 30%;
    top: 30%;
    position: fixed;
    }
    
    #subject02 {
    right: 30%;
    bottom: 30%;
    position: fixed;
    }
     */
    
    .targetDiv {
    position:absolute;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity:0;
    -webkit-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear;
    position: fixed;
    
    }
    
    .plus, .topleft, .topright, .bottomleft, .bottomright {
    position: fixed;
    opacity: 0;
    -webkit-transition: all 250ms linear;
    -o-transition: all 250ms linear;
    transition: all 250ms linear;
    }
    
    .stayhovered {
    opacity: 1;
    }
    
    img:hover ~ div .topleft,
    img:hover ~ div .topright,
    img:hover ~ div .bottomleft,
    img:hover ~ div .bottomright
    {
    visibility: visible;
    opacity: 1;
    }
    
    .show:hover .caption01 {
        visibility: hidden;
        opacity: 0;
    }

    .show:hover .targetDiv {
    visibility: visible;
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100%;
    opacity: 1;
    z-index: -1;
    }
    
    .show:hover {
    z-index: 0;
    }
    
    .show {
    z-index: 1;
    }