Question

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

修改我的事件面临的另一个问题是，在添加此代码时--var mydata = $（this）.text（）; $（ 'mydatatoshow'）追加（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/

Answer 1

试试这个：

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

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

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

使用z-index修复div位置并将鼠标加载到另一个div上的内容上

2 个答案: