0

我的数据正确地提醒mouseover了 div 上的数据，但是我仍然在为我的 CSS 弱点而苦苦挣扎。我需要在鼠标悬停时使用属性而不是警报在rightsideblockdiv上显示数据。z-index我创建了一个类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/

4

2 回答 2

0

试试这个：

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

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

于 2012-07-07T08:14:58.503 回答
0

工作解决方案——

  <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>
于 2012-07-07T11:27:47.007 回答