1

これらは私のコードです：

PHP

<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$('#panel').mouseover(function(){
$('.strip').css("background-image","url(images/Strip_orange.png)");
});
$('#panel').mouseout(function(){
$('.strip').css("background-image","url(images/Player_Strip.png)");
});
});
</script>
</head>
<body>
<div id="container">

<div class="panel"  >
<?php
for($i=0;$i<=9;$i++)
    {
        ?>
        <div class="strip">1</div>
        <div class="strip" >Hello World!!!</div>
        <div class="strip">HTML</div>
        <div class="strip">numeric</div>
        <?php
    }

    ?>
    <img src="images/desc.png">
</div>
</div>
</body>

CSS

#container {
clear:both;
margin: 0 auto;
position: relative;left:35px;top:40px;
width: 800px;
padding-bottom:200px;
}
#panel
{
clear: both;
position:relative;left:65px;bottom:329px;

}
.strip{
float:left;
margin:0;
padding: 8px 0 0 0;
width:160px;
text-align:center;
height: 20px;
font-size:14px;
border-right: 1px solid #ced9ec;
border-bottom: 1px solid #b3c1db;
position:relative;top:400px;left:53px;
}

私が直面している2つの問題があります：

  • div パネルから div ストリップが出てきて、その問題を解決できません。
  • マウスオーバーは単一行で機能するはずです。1 つの行にカーソルを合わせると、その行の画像が Strip_orange.png に変更されます。代わりに、div 全体がホバー時に Strip_orange.png になっています。
4

1 に答える 1

0

あなたが望むものによると、あなたのマークアップは少し間違っています。すべての開発者がテーブルを嫌うのはわかっていますが、実際にテーブルがある場合は、ためらわずに「テーブル」を使用してください (私は規則に従います: Excel シート内にデータを挿入できる場合はテーブルです)。

また、別の問題は、使用したことですclass="panel"が、css で宣言した#panel( # = id );ことです。

ここで例を示しました。player_strip バックグラウンドで何をしているのかわかりませんでした。また、「離れる」div で何が起こるかを正確に理解するために、 clearfixについて学ぶことをお勧めします。あなたが何をしたいのか正確にはわかりませんが、それほど多くは必要ないと確信していますposition: relative;。

于 2012-12-28T11:07:24.757 に答える