用于隐藏图像和更改文本的Javascript不起作用

这是我的代码：

我想在鼠标滚动时隐藏图像，只显示文本。然后，当鼠标移开时，图像应该是可见的。 文本属性工作正常，但图像有问题。 单击后，它将完全消失

函数更新1（元素）{
document.getElementById（“d1”）.innerHTML=“web开发和设计，html css js和引导”；
document.getElementById（“d1”）.style.borderRadius=“4.5%”；
document.getElementById（“imgd1”）.style.visibility='hidden'；
}
函数undod1（）{
document.getElementById（“d1”）.innerHTML=“WEB开发”；
document.getElementById（“d1”）.style.borderRadius=“0%”；
document.getElementById（“imgd1”）.style.visibility='visible'；
}

#d1{
边框：1px实心；
填充顶部：7px；
文本对齐：居中；
盒影：5px10px#DBE0E3；
利润率最高：3%；
颜色：#FFFFFF；
宽度：350px；
高度：350px；
字体大小：40px；
字体大小：粗体；
线高：70px；
背景色：#DC3D3D；
}

js
网络开发

设置innerHTML时，您正在擦除图像

函数更新1（元素）{
document.getElementById（“d1”）.innerHTML=“web开发和设计，html css js和引导”；
document.getElementById（“d1”）.style.borderRadius=“4.5%”；
document.getElementById（“imgd1”）.style.visibility='hidden'；
}
函数undod1（）{
document.getElementById（“d1”）.innerHTML=“WEB开发”；
document.getElementById（“d1”）.style.borderRadius=“0%”；
document.getElementById（“imgd1”）.style.visibility='visible'；
}

.d1{
边框：1px实心；
填充顶部：7px；
文本对齐：居中；
盒影：5px10px#DBE0E3；
利润率最高：3%；
颜色：#FFFFFF；
宽度：350px；
高度：350px；
字体大小：40px；
字体大小：粗体；
线高：70px；
背景色：#DC3D3D；
}

js
WEB开发

设置innerHTML时，您正在擦除图像

函数更新1（元素）{
document.getElementById（“d1”）.innerHTML=“web开发和设计，html css js和引导”；
document.getElementById（“d1”）.style.borderRadius=“4.5%”；
document.getElementById（“imgd1”）.style.visibility='hidden'；
}
函数undod1（）{
document.getElementById（“d1”）.innerHTML=“WEB开发”；
document.getElementById（“d1”）.style.borderRadius=“0%”；
document.getElementById（“imgd1”）.style.visibility='visible'；
}

.d1{
边框：1px实心；
填充顶部：7px；
文本对齐：居中；
盒影：5px10px#DBE0E3；
利润率最高：3%；
颜色：#FFFFFF；
宽度：350px；
高度：350px；
字体大小：40px；
字体大小：粗体；
线高：70px；
背景色：#DC3D3D；
}

js
WEB开发

您的问题在于此部分

document.getElementById("d1").innerHTML = "...";

因为此代码将从父对象中删除所有子对象并插入文本。所以基本上，当你的鼠标离开的时候，没有图像可以让它可见。您不需要太多Javasctipt来创建所需的效果。更好的HML，更多的CSS和更少的JS：

网络开发

#d1：悬停{
边界半径：4.5%；
}
img{
不透明度：1
}
#d1：悬停式img{
不透明度：0
}

---

如果您尝试执行比要求更复杂的操作，请尝试添加/删除类以更改样式，而不是在Javascript中添加样式。这是一种更简单、更简洁的方式来更改样式。

您的问题在于这一部分

document.getElementById("d1").innerHTML = "...";

因为此代码将从父对象中删除所有子对象并插入文本。所以基本上，当你的鼠标离开的时候，没有图像可以让它可见。您不需要太多Javasctipt来创建所需的效果。更好的HML，更多的CSS和更少的JS：

网络开发

#d1：悬停{
边界半径：4.5%；
}
img{
不透明度：1
}
#d1：悬停式img{
不透明度：0
}

---

如果您尝试执行比要求更复杂的操作，请尝试添加/删除类以更改样式，而不是在Javascript中添加样式。这是一种更简单、更简洁的方式来更改样式。

当两个单词之间用连字符分隔时，如

border radius

，只需在中使用驼峰大小写，如

borderRadius

javascript@Gad非常感谢。成功了！你也能帮我处理这些图像吗？你的代码笔工作正常，你现在需要什么？@user13806962在代码笔中单击一下，图像就看不见了，文本和一切都很好。我不明白为什么图像不再可见。两个单词什么时候用连字符分隔，比如

边界半径

，请在中使用驼峰大小写，比如

边界半径

javascript@Gad非常感谢。成功了！你也能帮我处理这些图像吗？你的代码笔工作正常，你现在需要什么？@user13806962在代码笔中单击一下，图像就看不见了，文本和一切都很好。我不明白为什么图像不再可见。非常感谢！我搜索了innerHTML的替代品，找到了firstChild.data和firstChild.nodeValue！现在，当我修改我的js时，代码正在运行！如果您对此有其他解决方案，请与他人分享，并再次感谢！）问题其实不是使用innerHTML，而是使用实际的html。我提供的解决方案仍然使用innerHTML，它只适用于您想要更改的部分。非常感谢！我搜索了innerHTML的替代品，找到了firstChild.data和firstChild.nodeValue！现在，当我修改我的js时，代码正在运行！如果您对此有其他解决方案，请与他人分享，并再次感谢！）问题其实不是使用innerHTML，而是使用实际的html。我提供的解决方案仍然使用