Javascript 如何使用Z-index设置div并修复css_Javascript_Jquery_Html_Css_Z Index

Javascript 如何使用Z-index设置div并修复css

javascript jquery html css

Javascript 如何使用Z-index设置div并修复css,javascript,jquery,html,css,z-index,Javascript,Jquery,Html,Css,Z Index,关注领域- 我的蓝色Div与绿色Div重叠。（我想要一个绿色Div，然后在侧边蓝色Div）在鼠标上方加载的内容使蓝色div掉落然而，我正试图将“mydatatoshow”div设置为结束使用jqueryz-index属性“rightsideblock” 请看一看，并让我知道可能的解决办法我的工作代码--- .container{宽度：999px；} .leftsideblock{float:left；边框：1px纯绿色；宽度：674px；} .rightsideblock{边框：

关注领域-

我的蓝色Div与绿色Div重叠。（我想要一个绿色Div，然后在侧边蓝色Div）
在
```
鼠标上方
```
加载的内容使蓝色div掉落然而，我正试图将“mydatatoshow”div设置为结束使用jquery
```
z-index
```
属性“rightsideblock”

请看一看，并让我知道可能的解决办法

我的工作代码---


.container{宽度：999px；}
.leftsideblock{float:left；边框：1px纯绿色；宽度：674px；}
.rightsideblock{边框：5px纯蓝色；}
$（文档）.ready（函数（）{
$（'.mydivdata'）.mouseover（函数（）{
$（'.mydatatoshow'）.css（'z-index'，'9999'）；
$（'.mydatatoshow'）.show（）；
var mydata=$（this.text（）；
$（'.mydatatoshow'）.html（mydata）；
});
$（'.mydivdata'）.mouseout（函数（）{
$（'.mydatatoshow'）.hide（）；
});
});
测试到测试
2012年7月7日星期一
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
2012年7月6日星期五上午8:00
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据数据。

z-index

仅在指定位置类型时有效。

尝试此操作

   <html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.container{width:999px;}
.leftsideblock{float:left; border:1px solid green;width:674px;}
.rightsideblock{border:5px solid blue;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


<title>Test To Test</title>
</head>
<body>
    <div class="container">
    <table>
    <tbody><tr>
    <td>
        <div class="leftsideblock">
            <div class="mydivdata">
                <table width="650" border="0">
                    <tbody>
                    <tr>
                        <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td>
                        <td width="193" valign="top">Monday 07 July 2012</td>
                        <td width="424">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="mydivdata">
                <table width="650" border="0">
                <tbody>
                <tr>
                    <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td>
                    <td width="193" valign="top">Friday 06 July 2012 8:00AM</td>
                    <td width="424">
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
        </div>
        </td>
        <td>
        <div class="rightsideblock" style="top: 0;position: absolute;width: 300px;float: right;">
            <p style="z-index:-1">
                This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right    sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.
            </p>

        <div class="mydatatoshow" style="top: 0px; left: 0px; z-index: 9999; float: right; position: absolute; display: none; ">



                    &nbsp;
                    Friday 06 July 2012 8:00AM

                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




            </div></div>

        </td>
        </tr>
        </tbody></table>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){

    $('.mydivdata').mouseover(function(){
            $('.mydatatoshow').css('z-index', '9999');
            $('.mydatatoshow').show();
       //     document.getElementById('to_hide').style.display='none';
            var mydata = $(this).text();
            $('.mydatatoshow').html(mydata);        
        });

    $('.mydivdata').mouseout(function(){
    $('.mydatatoshow').hide();
    //document.getElementById('to_hide').style.display='block';
    });


    });
    </script>


</body></html>


.container{宽度：999px；}
.leftsideblock{float:left；边框：1px纯绿色；宽度：674px；}
.rightsideblock{边框：5px纯蓝色；}
测试到测试
2012年7月7日星期一
知识产权是一种权利，是一种精英的权利，是劳动和财富的暂时性权利。但是，在最低限度上，我们需要一个实验室来进行日常工作。
2012年7月6日星期五上午8:00
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。

这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据。这是右侧边栏数据数据。

2012年7月6日星期五上午8:00
两人或两人在一个无教区的房间里互相指责。除偶尔因疏忽而死亡外，不得因疏忽而导致动物死亡。
$（文档）.ready（函数（）{
$（'.mydivdata'）.mouseover（函数（）{
$（'.mydatatoshow'）.css（'z-index'，'9999'）；
$（'.mydatatoshow'）.show（）；
//document.getElementById（'to_hide'）.style.display='none'；
var mydata=$（this.text（）；
$（'.mydatatoshow'）.html（mydata）；
});
$（'.mydivdata'）.mouseout（函数（）{
$（'.mydatatoshow'）.hide（）；
//document.getElementById（'to_hide'）.style.display='block'；
});
});

这取决于你想要发生什么……通常情况下，位置：相对就是你想要的。阅读我如何修复这段代码，请提供一个解决方案，正如我所希望的，我已经在关注领域中提到过的，谷歌没有获取简单的解决方案，因为我对CSSi已经尝试过了，谷歌和粘贴我所做的，但如果我没有得到修复，我想我在正确的位置谢谢..我想要绿色和蓝色的div并排..目前蓝色div是绿色..我想要绿色块，然后蓝色Block@swapnesh我编辑的代码是绿色的div和蓝色的div彼此相邻，哇，还有30%要走…现在唯一剩下的就是现在“这是右侧边栏数据。。。。。“div数据将在鼠标悬停效果上隐藏，但我希望鼠标悬停在数据上的数据通过z-index……plz-help您的意思是在

mouseover

上，您希望mydatatoshow div内容显示在右侧块div的顶部。而右侧块div将通过z-index隐藏，而不是通过隐藏它？是吗？@swapnesh我只是忘了在IE中测试它。它有一个小错误！所以我再次编辑代码！

   <html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.container{width:999px;}
.leftsideblock{float:left; border:1px solid green;width:674px;}
.rightsideblock{border:5px solid blue;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>


<title>Test To Test</title>
</head>
<body>
    <div class="container">
    <table>
    <tbody><tr>
    <td>
        <div class="leftsideblock">
            <div class="mydivdata">
                <table width="650" border="0">
                    <tbody>
                    <tr>
                        <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td>
                        <td width="193" valign="top">Monday 07 July 2012</td>
                        <td width="424">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div class="mydivdata">
                <table width="650" border="0">
                <tbody>
                <tr>
                    <td width="90" valign="top" rowspan="2" class="myimageclass">&nbsp;</td>
                    <td width="193" valign="top">Friday 06 July 2012 8:00AM</td>
                    <td width="424">
                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </td>
                </tr>
                </tbody>
                </table>
            </div>
        </div>
        </td>
        <td>
        <div class="rightsideblock" style="top: 0;position: absolute;width: 300px;float: right;">
            <p style="z-index:-1">
                This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right    sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.This is right sidebar data.
            </p>

        <div class="mydatatoshow" style="top: 0px; left: 0px; z-index: 9999; float: right; position: absolute; display: none; ">



                    &nbsp;
                    Friday 06 July 2012 8:00AM

                        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.




            </div></div>

        </td>
        </tr>
        </tbody></table>
    </div>

    <script type="text/javascript">
    $(document).ready(function(){

    $('.mydivdata').mouseover(function(){
            $('.mydatatoshow').css('z-index', '9999');
            $('.mydatatoshow').show();
       //     document.getElementById('to_hide').style.display='none';
            var mydata = $(this).text();
            $('.mydatatoshow').html(mydata);        
        });

    $('.mydivdata').mouseout(function(){
    $('.mydatatoshow').hide();
    //document.getElementById('to_hide').style.display='block';
    });


    });
    </script>


</body></html>