Question

我正在开发一个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];
}

http://jsfiddle.net/59jfntxs/

这是我用来创建数据数组的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";";
}

编辑：这是解决方案，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' />".'",';
}

实际代码：

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

http://jsfiddle.net/awaszgbs/

另外需要注意的是，此代码是我的网站中没有CSS和Jquery的纯HTML / JavaScript。

感谢您的帮助！

Answer 1

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

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

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

1 个答案: