Javascript 当鼠标悬停在图像上时，onmouseover会失败

我正在开发一个PHP页面，它在一个表中显示来自数据库的数据。 数据库中的每一列都是表中的一个单元格，每一列都是一个“ATC站”。 如果它处于活动状态，则构建ul li，当鼠标位于单元格上方时，在中央li中显示更多数据

到目前为止，一切都很好。 我面临的问题是，当我将一个图像添加到中央li，然后将鼠标放在图像上。。。 它会疯狂地从默认位置移动到鼠标悬停的位置

var imgURL = "'https://www.ivao.aero/data/images/ratings/atc/";
var data = ["x"];
var lastData = ["x"];

// This is created using a PHP for loop of all data.
data[0] = "Amr Magdy (430603) <br/><img src=" + imgURL + "5.gif'>";
data[1] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[2] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[3] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[4] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[5] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[6] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[7] = " (0) <br/><img src=" + imgURL + ".gif'>";
data[8] = " (0) <br/><img src=" + imgURL + ".gif'>";

function displayData(id) {
    lastData[id] = document.getElementById(id).innerHTML;
    document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + data[id];
}

function hideData(id) {
    document.getElementById(id).innerHTML = lastData[id];
}

var imgURL=“”https://www.ivao.aero/data/images/ratings/atc/";
风险值数据=[“x”]；
var lastData=[“x”]；
//这是使用所有数据的PHP for循环创建的。
数据[0]=“Amr Magdy（430603）
”；
数据[1]=“（0）
”；
数据[2]=“（0）
”；
数据[3]=“（0）
”；
数据[4]=“（0）
”；
数据[5]=“（0）
”；
数据[6]=“（0）
”；
数据[7]=“（0）
”；
数据[8]=“（0）
”；
函数显示数据（id）{
lastData[id]=document.getElementById（id）.innerHTML；
document.getElementById（id）.innerHTML=document.getElementById（id）.innerHTML+数据[id]；
}
函数hideData（id）{
document.getElementById（id）.innerHTML=lastData[id]；
}

这是我用来创建数据数组的for循环

for($i = 0; $i < count($RFE_stands); $i++)
{
    $data = explode(":", $RFE_stands[$i]['image']);
    echo "data[{$i}] = ";echo '"'.$data[2].' ('.$data[0].') <br/><img src="+imgURL+"'.$data[3].".gif'".'>"'; echo";";
}

for（$i=0；$i“；echo”；”；
}

编辑： 在Stefan的帮助下，解决方案如下。 我已经在JavaScript和PHP中更改了数据删除的方法，这样执行他的解决方案就更容易了

PHP for循环：

for($i = 0; $i < count($RFE_stands); $i++)
{
    $data = explode(":", $RFE_stands[$i]['image']);
    echo '"'."{$data[2]} (<a onmouseover='displayData({$i})' onmouseout='hideData({$i})' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id={$data[0]}'>{$data[0]}</a>) <br/><img onmouseover='displayData({$i})' onmouseout='hideData({$i})' src='https://www.ivao.aero/data/images/ratings/atc/{$data[3]}.gif' />".'",';
}

for（$i=0；$i'；
}

实际代码：

<table id="atcOn" style="border-spacing: 20px 10px;">
<tr><td class='ATConline' onmouseover='displayData(0)' onmouseout='hideData(0)'><ul><li>LCCC_CTR</li><li id='0'> </li><li>122.800 Mhz</li></ul></td><td>LLBG_APP</td><td>LLBG_DEL</td></tr><tr><td>LLBG_E_GND</td><td>LLBG_TWR</td><td>LLBG_W_GND</td></tr><tr><td>LLLL_CTR</td><td>LLLL_FSS</td><td>LLSD_TWR</td></tr><tr></tr></table>
<script>
    var lastData = new Array();
    var data = new Array(
"Test Test (<a onmouseover='displayData(0)' onmouseout='hideData(0)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=390833'>390833</a>) <br/><img onmouseover='displayData(0)' onmouseout='hideData(0)' src='https://www.ivao.aero/data/images/ratings/atc/5.gif' />"," (<a onmouseover='displayData(1)' onmouseout='hideData(1)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(1)' onmouseout='hideData(1)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(2)' onmouseout='hideData(2)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(2)' onmouseout='hideData(2)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(3)' onmouseout='hideData(3)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(3)' onmouseout='hideData(3)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(4)' onmouseout='hideData(4)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(4)' onmouseout='hideData(4)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(5)' onmouseout='hideData(5)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(5)' onmouseout='hideData(5)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(6)' onmouseout='hideData(6)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(6)' onmouseout='hideData(6)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(7)' onmouseout='hideData(7)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(7)' onmouseout='hideData(7)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />"," (<a onmouseover='displayData(8)' onmouseout='hideData(8)' href='https://www.ivao.aero/Login.aspx?r=Member.aspx?Id=0'>0</a>) <br/><img onmouseover='displayData(8)' onmouseout='hideData(8)' src='https://www.ivao.aero/data/images/ratings/atc/.gif' />", "");

    function displayData(id)
    {
        lastData[id] = document.getElementById(id).innerHTML;
        document.getElementById(id).innerHTML = document.getElementById(id).innerHTML + data[id];
    }
    function hideData(id)
    {
        document.getElementById(id).innerHTML = lastData[id];
    }
</script>

LCCC\u CTR
122.800 Mhz
LLBG-APPLLBG\u-E\u-GNDLLBG\u-TWRLLBG\u-W\u-gndll\u-FSSLLSD\u-TWR
var lastData=新数组（）；
变量数据=新数组(
“测试测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试（）
”，“测试”（）；
函数显示数据（id）
{
lastData[id]=document.getElementById（id）.innerHTML；
document.getElementById（id）.innerHTML=document.getElementById（id）.innerHTML+数据[id]；
}
函数hideData（id）
{
document.getElementById（id）.innerHTML=lastData[id]；
}

还要注意的是，这段代码是纯HTML/JavaScript，在我的网站中没有CSS和Jquery

---

谢谢你的帮助

我建议使用更多的CSS代码，但这是我个人的意见。 如果在图像上使用相同的onmouseover/out技术，这将解决问题。当你把鼠标放在图像上的那一刻，你就不再是td标签上的人了

<img onmouseover='displayData(0)' onmouseout='hideData(0)'  src=" + imgURL + ".gif'>"

”

现在请告诉我，当你试图将链接作为常规链接发布到JSFIDLE时，编辑器警告了你什么！-1.我知道，伙计，我花了好几个小时试图设置它，你能帮我吗？在“帮助”菜单中，它没有解释任何关于JSFIDLE的内容。哦，说真的吗？编辑器没有警告你，到JSFIDLE的链接必须附带代码吗增益，它确实警告了我，但我无法正确设置它，应该如何做？ehh？

echo“data[{$I}]=“echo”“”。$data[2]”（“$data[0]”）
“；