0

我对网络开发很陌生，以至于我不确定如何提出这个问题，但这就是我面临的问题。

我正在为一所大学的特定部门开发一个网站，该网站有自己的样式表，但我无法编辑。我正在尝试为网站导航制作图像拼贴 - 当您将鼠标悬停在图像上时，我希望交换不同的图像。我使用的第一种方法是 javascript：

<div class="box">
<a target="_blank" href="http://bike.cofc.edu/"><img src="../biking" onmouseover="this.src='../biking-label'" onmouseout="this.src='../biking'" class="icon" alt="biking" /></a> 
</div>

这在 cms 中运行良好，但是当我发布图像交换时没有发生 - onmouseover 导致第一个图像消失但第二个图像没有成功调用，并且 onmouseout 没有逆转损坏的交换。

我想也许大学不允许我的 javascript，所以我尝试只使用 css 和 html：

span.imgswap-biking {
  background-image:url("");
  background-size:100px 100px; 
  border: 1px solid black;
  background-repeat: no-repeat; display:block;
}
span.imgswap-biking:hover img {
  visibility:hidden;
} 
</style>
<span class="imgswap-biking">
 <img src="" alt="biking" />
</span>

同样，这在 cms 中实现了相同的效果，但是当我发布时，发生了交换并且是可逆的，但是没有成功调用背景图像。恐怕背景不被认可。

我的基本困惑是理解发布网站时功能是如何丢失的。我真的不明白在我的网站在 cms 上看起来不错的时间和发布时它被剥离的时间之间发生了什么。如果可能的话，关于如何知道什么样的脚本和 css 更改会起作用的一般指导会很有帮助。我应该提到我在网页顶部包含 css，因为我无法访问样式表 - 大学样式表会总是覆盖我的吗？提前致谢。

沃尔特

4

0 回答 0