Javascript jquery div隐藏和显示、z索引问题和mouseover/mouseout问题_Javascript_Jquery_Css

Javascript jquery div隐藏和显示、z索引问题和mouseover/mouseout问题

javascript jquery css

Javascript jquery div隐藏和显示、z索引问题和mouseover/mouseout问题,javascript,jquery,css,Javascript,Jquery,Css,我用jquery制作了一个简单的div悬停控件，显示和隐藏介绍词我已经问了一个问题 @史蒂夫·珀克斯和@patorjk回答了我的问题。谢谢他们两个但是现在，我还有一些问题 IE中的索引问题。如何使div.hover处于顶层如果我在div.hover中添加了一些超链接，那么如何修改js代码，以便只将div.hover和div.title鼠标移出，div.hover将被隐藏（我需要单击链接）非常感谢我在这里更新了代码 HTML <div id="body"> <

我用jquery制作了一个简单的div悬停控件，显示和隐藏介绍词

我已经问了一个问题

@史蒂夫·珀克斯和@patorjk回答了我的问题。谢谢他们两个

但是现在，我还有一些问题

IE中的索引问题。如何使

div.hover

处于顶层

如果我在

div.hover

中添加了一些超链接，那么如何修改js代码，以便只将

div.hover

和

div.title

鼠标移出，

div.hover

将被隐藏（我需要单击链接）

非常感谢

我在这里更新了代码

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>

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();
    }
);
});

1）它似乎工作正常，但此代码将保证它位于顶部：

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

2）您只需为悬停div添加mouseover和mouseout函数：

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

1）它似乎工作正常，但此代码将保证它位于顶部：

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

2）您只需为悬停div添加mouseover和mouseout函数：

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

要解决IE中的z索引问题，需要在激活或悬停时将z索引应用于

.box

容器

有关示例，请参见

更新的js:

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

注意更新的类：

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

和新类：

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

为了解决IE中的z索引问题，您需要在激活或悬停时将z索引应用于

.box

容器

有关示例，请参见

更新的js:

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

注意更新的类：

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

和新类：

jQuery(document).ready(function() {
    $('.box:nth-child(4n+4)').addClass('oy');
    $(".title").mouseover(

    function() {
        $(this).parent('.box').addClass("indexFix").children(".hover").show();
    }), $(".title").mouseout(

    function() {
        $(this).parent('.box').removeClass("indexFix").children(".hover").hide();
    });
});

.box {
    float: left;
    width: 180px;
    height: 150px;
    margin: 9px;
    border: 1px solid #666;
    }

.indexFix {
    z-index: 10;
    }

Internet Explorer展览的哪个版本“索引问题”？@thirtydot，Adam Lamer回答了一个问题，在ie8中有效，但在ie6中无效，你有什么好主意吗？谢谢。Internet Explorer展览的哪个版本“索引问题”？@thirtydot，Adam Lamer回答了一个问题，在ie8中有效，但在ie6中无效，你有什么好主意吗？谢谢，谢谢。在ie8中工作，但在ie6中不工作。。。还有其他建议吗？谢谢。嗯，从我所能找到的来看，比约恩的解决方案应该适用于索引。他的索引修复和我的鼠标悬停功能的合并应该可以完成这项工作。让我知道进展如何！是的，我测试了他们的代码，但是

4th，8th.hover

位置变为屏幕右侧，而不是

4th，8th.box的右侧。谢谢。在ie8中工作，但在ie6中不工作。。。还有其他建议吗？谢谢。嗯，从我所能找到的来看，比约恩的解决方案应该适用于索引。他的索引修复和我的鼠标悬停功能的合并应该可以完成这项工作。让我知道进展如何！是的，我测试了他们的代码，但是4th，8th.hover
位置变为屏幕右侧，而不是4th，8th.box的右侧。这可以解决索引问题。但是4th，8th.hover
位置变为屏幕的右侧
，而不是4th，8th.box的右侧
。谢谢。您需要将位置：relative
添加到.box
并设置悬停左侧：0px
。请参见此处：。这可以解决索引问题。但是4th，8th.hover
位置变为屏幕的右侧
，而不是4th，8th.box的右侧
。谢谢。您需要将位置：relative
添加到.box
并设置悬停左侧：0px
。请参见此处：。