使用 z-index 修复 div 位置并将鼠标悬停在另一个 div 上的内容上答案

【问题标题】：Fix div position and load mouse over content over another div using z-index使用 z-index 修复 div 位置并将鼠标悬停在另一个 div 上的内容上
【发布时间】：2012-07-07 07:57:01
【问题描述】：

我的数据通过 div 正确地提醒 mouseover 上的数据，但我仍在努力解决我的 CSS 弱点。我需要在鼠标悬停时使用z-index 属性而不是警报来显示rightsideblock div 上的数据。我创建了一个类mydatatoshow 来保存显示设置为无的数据，但我无法正确配置它。帮我解决这个问题，因为我搜索了很多。请建议一些可能有助于开发人员修复 CSS 问题的链接。

编辑我的活动面临的另一个问题是在添加此代码时 --var mydata = $(this).text(); $('.mydatatoshow').append(mydata);它会将数据正确地添加到 div，但我希望鼠标移出数据也会消失

我的 CSS --

<style type="text/css">
.container{width:999px;}
.leftsideblock{float:left; border:1px solid green;width:674px;}
.rightsideblock{border:5px solid blue;}
</style>

我的正文内容 --

<body>

<div class="container">
    <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>


    <div class="mydatatoshow" style="display:none;">
    </div>

    <div class="rightsideblock">
    <p>
    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>

</div>

</body>

我的 JS--

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.mydivdata').mouseover(function(){
var mydata = $(this).text();
alert(mydata);
});
});
</script>

这是 jsFiddle：http://jsfiddle.net/JsnDc/

【问题讨论】：

您可以使用 jquery 更改 div 的 z-index 值
@MohammadAdil 是的，兄弟，但我对 css 部分完全不利。..不知道如何使用 z-index 将 div“mydatatoshow”设置为“rightsideblock”，这就是为什么提供了整个代码和努力:)跨度>

标签： javascript jquery css z-index mouseover

【解决方案1】：

试试这个：

 $('.mydivdata').mouseover(function(){
        $('.mydatatoshow').css('z-index', '9999');
    });

请参阅 this 和 this 以正确定位您的 div。

【讨论】：

@MohammadAli 我的活动面临的另一个问题是在添加此代码时 --var mydata = $(this).text(); $('.mydatatoshow').append(mydata);它将数据正确地添加到 div 但我希望在 moue out 时数据也消失
@MohammadAli 是的，但是追加的反面是什么？现在这是我的代码，但不能解决鼠标问题—— $(document).ready(function(){ $('.mydivdata').mouseover(function(){ //$('.mydatatoshow').css( 'z-index', '9999'); var mydata = $(this).text(); $('.mydatatoshow').append(mydata); $('.mydivdata').mouseout(function(){ $('.mydatatoshow').remove(mydata); }); }); });
你可以在这里做的是......只需在附加到它之前复制你在mydatatoshow 中的文本......然后在鼠标移出时只需将备份的文本放回mydatatoshow
@MohammadAli 能否请您为内容较少的内容设置一个 jsfiddle ..只是为了掌握逻辑:)

【解决方案2】：

工作解决方案 --

  <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>
    <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>

    <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>




    </body></html>

【讨论】：