鼠标悬停时不显示图像
以下代码仅执行颜色更改。我从来没有看到过图像。
我正在 Visual Studio 2017 中用 C# ASP.Net 编写此内容
基本上尝试了此代码的变体。
<asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server"
OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility
ID</asp:LinkButton>
<img src="../Images/invoice.PNG" id="image1" alt="Image Not Found"
width="1000" height="500" style="display:none;" runat="server" />
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
document.getElementById("LinkButton1").onmouseover = function()
{mouseOver()};
document.getElementById("LinkButton1").onmouseout = function()
{mouseOut()};
function mouseOver() {
document.getElementById("LinkButton1").style.color = "red";
document.getElementById("LinkButton1").style.display="inline";
document.getElementById("LinkButton1").src = '../Images/invoice.PNG';
}
function mouseOut() {
document.getElementById("LinkButton1").style.color = "black";
}
</script>
我希望看到图像像标注或弹出窗口一样显示。文字变为红色，页面仅显示 javascript:__doPostBack('LinkButton1','')
慕神84474893回答
-
森林海
我想我可能会看到你的问题。在这条线上document.getElementById("LinkButton1").src = '../Images/invoice.PNG';您似乎正在尝试更新按钮的 src 而不是图像。尝试更新您的代码以使用 img 标签的 id，如下所示document.getElementById("image1").src = '../Images/invoice.PNG';EDIT1 好的，我现在添加，所以当您将鼠标悬停在按钮上时，图像可用，而当您将鼠标移出时，图像就会消失。我使用 css 可见性属性来执行此操作。我们使用 style 属性将图像默认内联设置为隐藏。当您将鼠标悬停在按钮上时，我们将可见属性设置为可见，而当您将鼠标移出按钮时，我们将其设置回隐藏。这是执行此操作的代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body> <button id="button1">Button</button> <img id="image1" src="https://assets.pokemon.com/assets/cms2/img/pokedex/full/025.png" style="visibility: hidden;"></img></body><script> function mouseOver(){ document.getElementById('button1').style.color = "green"; document.getElementById('button1').style.display = "inline"; document.getElementById('image1').style.visibility = "visible"; } function mouseOut(){ document.getElementById('button1').style.color = "red"; document.getElementById('image1').style.visibility = "hidden"; } document.getElementById('button1').onmouseover = mouseOver; document.getElementById('button1').onmouseout = mouseOut;</script></html>我还使用新代码更新了 gitub 示例，并将其放入文件标题 index2.html 中。 -
弑天下
在您的建议和一些修改之间，我能够使代码按预期工作。这是最终的代码。当我将鼠标悬停在链接按钮上时，图像显示在按钮下方，并在鼠标移出时消失。<asp:LinkButton ID="LinkButton1" Font-Underline="true" runat="server" OnMouseOver="mouseOver();" OnMouseOut="mouseOut();">Facility ID</asp:LinkButton>function mouseOver() {document.getElementById("image1").style.display = "inline";document.getElementById("image1").style.backgroundimage = "input type=image";}function mouseOut(){document.getElementById("image1").style.display="none";} -
当年话下
LinkButton 只是 html 中的一个锚点，没有属性src。它不是一个图像。使用背景图像。document.getElementById("LinkButton1").style.backgroundImage = "url('image.png')";或者将其更改为 ImageButton 控件，它变为<input type="image"
随时随地看视频慕课网APP
相关分类
C#