Question

这些是我的代码：

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正从div面板中出来，我无法解决那个问题。
Mouseover应该适用于单行。如果我徘徊超过一行，该行应将图像更改为Strip_orange.png。相反，我的整个div在悬停时转动了Strip_orange.png。

Answer 1

根据你的想法你的标记有点不对劲。我知道，所有开发人员都讨厌桌子，但是当你真的有桌子时，请不要犹豫使用“桌子”（我遵循规则：如果我可以在excel表格中插入数据，那么就是表格。）

另一个问题是你使用了class="panel"但是在css中你声明了#panel（＃= id）;

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

Html div和Javascript鼠标悬停功能不佳

1 个答案: