0

mouseover私のデータはdiv上のデータを正しく警告していますが、まだ CSS の弱点に苦しんでいます。アラートの代わりに、マウスオーバー時にプロパティをrightsideblock使用して divにデータを表示する必要があります。表示を none に設定してデータを保持z-indexするクラスを作成しましたが、正しく構成できません。mydatatoshow私はたくさんグーグルで検索したので、これで私を助けてください。開発者が css の問題を修正するのに役立つ可能性のあるリンクをいくつか提案してください。

私のイベントで直面しているもう1つの問題を編集 します。これは、このコードを追加することです --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 に答える