Jquery Html div和Javascript鼠标盖功能不正常_Jquery_Html_Mouseover

Jquery Html div和Javascript鼠标盖功能不正常

jquery html

Jquery Html div和Javascript鼠标盖功能不正常,jquery,html,mouseover,Jquery,Html,Mouseover,这是我的密码： 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("backg

这是我的密码：

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>

我面临两个问题：

Div条从Div面板中出来，我无法解决这个问题
鼠标悬停应适用于单行。如果我徘徊超过一行时，该行应将图像更改为Strip_orange.png。相反，我的整个div将Strip_orange.png置于悬停状态

根据您的要求，您的加价有点错误。我知道，所有开发人员都讨厌表格，但是当你真的有一个表格时，不要犹豫使用“表格”（我遵循的规则是：如果我可以在excel表格中插入数据，那么就是一个表格）

另一个问题是您使用了

class=“panel”

，但在css中声明了

#panel

（#=id）

我给你举了个例子。我不明白你对玩家的背景做了什么。

此外，我建议你学习如何准确理解你的“离职”div会发生什么。我不知道你到底想做什么，但我相信你不需要那么多的

position:relative 如果你只是想在鼠标上方更改背景图像，CSS:hover就可以了……谢谢你的回复，但我的代码中有wrt面板，我不能使用table，因为我对div有要求，严格来说不允许使用table。这里的问题是，strip是一个我用作行的图像，因此尽管进行了所有调整，我的行还是会从div面板中消失。而Player_strip是一个图像，在它变为strip_orange之前可以看到并使用鼠标悬停。我在web开发方面工作了大约5年，但第一次听说我不能使用表当我真的要摆桌子的时候。无论如何，我为您找到了另一个解决方案：。
#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;
}