javascript - 鼠标悬停不显示图像
问题描述
以下代码仅执行颜色更改。我从来没有看到图像。
我正在 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','')
解决方案
我想我可能会看到你的问题。在这条线上
document.getElementById("LinkButton1").src = '../Images/invoice.PNG';
您似乎正在尝试更新按钮的 src 而不是图像。
尝试更新您的代码以使用这样的 img 标签的 id
document.getElementById("image1").src = '../Images/invoice.PNG';
EDIT1 好的,我现在添加,所以当您将鼠标悬停在按钮上时,图像可用,而当您将鼠标移出时,图像就会消失。我正在使用 css 可见性属性执行此操作。默认情况下,我们使用 style 属性在元素上将图像设置为隐藏。当您将鼠标悬停在按钮上时,我们将可见属性设置为可见,当您将鼠标移出时,我们将其设置回隐藏。
这是执行此操作的代码
<!DOCTYPE html>
<html lang="en">
<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 中,您可以在此处查看。
推荐阅读
- javascript - 为什么 ScrollTop 位置在移动 Safari 上不起作用?
- python - Numpy - 根据数组提取 array2d 列
- sql - 使用 STRING_SPLIT() 评估列
- python - 第一个标题不出现(Matplotlib)
- javascript - 循环内的 if 语句有效。但不是在我添加“循环”/“重复”获取之后
- typescript - 'string | 类型的参数 undefined' 不能分配给“string”类型的参数
- php - PHP 评估一个字符串作为一个类
- json - 在没有 karaf 控制台的 pom.xml 中安装 org.json
- python - 从 Python 将值插入 MySQL 时出现“未定义”错误
- php - 删除PHP中第一个逗号后的所有字符