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

我面临两个问题：

  • div 条从 div 面板中出来，我无法解决这个问题。
  • 鼠标悬停应该适用于单行。如果我将鼠标悬停在一行上，则该行应将图像更改为 Strip_orange.png。相反，我的整个 div 正在将 Strip_orange.png 悬停。
4

1 回答 1

0

根据你想要的，你的标记有点错误。我知道，所有开发人员都讨厌表格，但是当您真的有表格时，请毫不犹豫地使用“表格”（我遵循规则：如果我可以将数据插入到 Excel 工作表中，那么就是表格）。

另一个问题是您使用class="panel"但在 css 中声明了#panel(# = id);

我在这里为你做了一个例子。我不明白你在用 player_strip 背景做什么。此外，我建议您了解clearfix以准确了解“离开” div 会发生什么。我不确切知道你想做什么，但我相信你不需要这么多position: relative;。

于 2012-12-28T11:07:24.757 回答