在 html 页面后面的代码中填充无效参数

Question

我试图在用户将鼠标悬停在图像上时显示表格单元格。（基本上显示关于该图像的工具提示）但我似乎无法将参数发送到我的服务器端。

HTML & CSS

body{
    background-image: url(Images/Background_Home.jpg);
    background-size: contain;
    width: 100%;
    height: 100vh;
    margin: 0;
}
.HomeNavImage:hover{
    opacity: .5;
}
.HomeNavImage{
    max-height: 100%;
    max-width: 100%;
}
.HomeNav{
    height: 15.7vh;
    padding: 0;
}
#Tooltip1,#Tooltip2,#Tooltip3,#Tooltip4,#Tooltip5,#Tooltip6{
    display: none;
}

<table id="HomeNavTable">
        <tr><td class="HomeNav"><a href="Home.aspx"><img class="HomeNavImage" src="Images/Home.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(1)" runat="server" /></a></td><td id="Tooltip1">Home</td></tr>
        <tr><td class="HomeNav"><a href="Forum.aspx"><img class="HomeNavImage" src="Images/Forum.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(2)" runat="server" /></a></td><td id="Tooltip2">Forum</td></tr>
        <tr><td class="HomeNav"><a href="Project.aspx"><img class="HomeNavImage" src="Images/Project.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(3)" runat="server" /></a></td><td id="Tooltip3">Project</td></tr>
        <tr><td class="HomeNav"><a href="Contact.aspx"><img class="HomeNavImage" src="Images/Contact.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(4)" runat="server" /></a></td><td id="Tooltip4">Contact</td></tr>
        <tr><td class="HomeNav"><a href="Store.aspx"><img class="HomeNavImage" src="Images/Store.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(5)" runat="server" /></a></td><td id="Tooltip5">Store</td></tr>
        <tr><td class="HomeNav"><a href="Patreon.aspx"><img class="HomeNavImage" src="Images/Patreon.png" alt="Use a browser that supports images!" onmouseover="DisplayTooltip(6)" runat="server" /></a></td><td id="Tooltip6">Donate</td></tr>
    </table>

代码隐藏

private void DisplayTooltip(int ID){
        HtmlTableCell Tooltip = new HtmlTableCell();
        Tooltip.ID = "Tooltip" + ID;
        Tooltip.Style.Add("display", "block");
}

我试过使用字符串而不是 int 作为 ID，但这并没有解决问题。在 HTML.

中寻找 'onmouseover'

Answer 1

onmouseover 是一个客户端事件，javascript。你能把后面的代码移到js吗？如果可以的话，应该这样做：

...onmouseover="DisplayTooltip(4)"

function DisplayTooltip(tooltipNum) {
    var ele = document.getElementById("Tooltip" + tooltipNum):
    ele.style.display = "block";
}

如果 display:none 从页面中完全删除工具提示，您可能必须使用 'visibility' 而不是 display:none。不过我觉得应该没问题。

在 html 页面后面的代码中填充无效参数

Fill void parameters in code behind from html page

html

css

c#

asp.net