Question

I made an easy div hover control, show and hidden introduce words with jquery.

I have already ask a question in stackoverflow.com

@Steve Perks and @patorjk answered me. Thanks both of them.

But now, I still have some more questions.

1. the index problem in IE. how to make div.hover on the top level?

2. If I add some hyper link in the div.hover, how to modify js code, so that only mouse out both div.hover and div.title, div.hover would hidden (I need click the link)

Thanks a lot.

---

I updated my code here http://jsfiddle.net/3jGdm/1/

HTML

<div id="body">
    <div id="main">
        <div class="box">
            <div class="title">1</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 1</p>
        </div>
        <div class="box">
            <div class="title">2</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 2</p>
        </div>
        <div class="box">
            <div class="title">3</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 3</p>
        </div>
        <div class="box">
            <div class="title">4</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 4</p>
        </div>
        <div class="box">
            <div class="title">5</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 5</p>
        </div>
        <div class="box">
            <div class="title">6</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 6</p>
        </div>
        <div class="box">
            <div class="title">7</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 7</p>
        </div>
        <div class="box">
            <div class="title">8</div>
            <div class="hover">this is number 1, when you hover to the box content, show <a href="">something</a> here.</div>
            <p>Box 8</p>
        </div>
    </div>
</div>

CSS

*{margin:0;padding:0;border:0;}
#body{width:100%;height:100%;background-color:#fff;}
#main{width:800px;height:400px;margin:0 auto;background-color:#999;}
.box{float:left;width:180px;height:150px;margin:9px;border:1px solid #666;display:inline-block;position:relative;}
.title{font-size:32px;line-height:150px;text-align:center;}
.hover{display:none;position:absolute;width:300px;background-color:#9C9;border:1px solid #666;z-index:10;font-size: 16px;}
.oy .hover{right:0;}
p{text-align:center;background-color:#333;}

jQuery

jQuery(document).ready(function(){
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(
    function () {
      $(this).parent('.box').children(".hover").show();
    }), 
    $(".title").mouseout(
    function () {
      $(this).parent('.box').children(".hover").hide();
    }
);
});

Answer 1

1) It seems to be working alright, but this code would guarantee it’s on top:

$('div.hover').css('z-index', '1000');

2) You would just add a mouseover and mouseout function for the hover divs as well:

$('div.hover').mouseover(
    function(){
        $(this).show();
    }
);
$('div.hover').mouseout(
    function(){
        $(this).hide();
    }
);

http://jsfiddle.net/3jGdm/6/