Question

我的网站工具栏有问题...我用它很好但是它的某些部分效果不好。我正在努力使图像在悬停时改变颜色/图像。但是，当我在css中使用background-image标签时，这似乎不起作用。它显示了我拥有的原始图像，但没有改变......这是我到目前为止所拥有的

#heading-button-1{
margin-left: 15%;
background-image: url(toolbar-button-home-default.png);
display: block; 
}

#heading-button-1:hover{
background-image: url(Website/toolbar-button-tracks-highlighted.png);   
width: 7%;
height: 8%;
display: block;
}

    <a type="button" id="heading-button-1" title="Home" href="#" target="_blank" class="toolbar-buttons">
    </a>

    <a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
    <img type="button" id="heading-button-2" src="Website/toolbar-button-tracks-default.png" width"7%" class="toolbar-buttons"/>
    </a>

但是这似乎并没有起作用，正如你在screenshot中看到的那样。我正在使用Adobe Dreamweaver CC 2015，所以如果您有任何链接，建议或解决方案，请帮助：）

Answer 1

如果需要，您可以使用javascript和图片完成此操作。

使用onmouseover和onmouseout

<a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
<img src="Original.jpg" onmouseover="this.src='Hover.jpg'" onmouseout="this.src='Original.jpg'" border="0" alt=""/>
</a>

您只需将Original.jpg替换为原始图片的链接，并在悬停时将Hover.jpg替换为您要替换的图片。

使用onclick

您还可以使用onclick在点击时更改图像，但不建议用于导航链接，因为在点击链接时可能会在用户有机会之前加载新页面看到被替换的图像。

<a title="Tracks" href="#" target="_blank" class="toolbar-buttons">
<img src="Original.jpg" onclick="this.src='Click.jpg'" border="0" alt=""/>
</a>

Answer 2

检查悬停图片的链接，我不认为这是正确的。特别是如果运行Linux的服务器区分大小写，那么url(Website/...和url(website/...是两个不同的地址。
为什么要在悬停时更改按钮的高度和宽度？是假设是这样吗？
我相信你只能在非悬停式样式中设置display: block;一次，这应该足够了。
您也可能希望摆脱按钮之间的这个微小的蓝色划线 - text-decoration: none;将完成这项工作
如果您用作背景图片的.png文件只包含一种颜色，则使用background-color: #CC393E;要简单得多。它会加快页面加载速度

＆＃13;

nav a {
  padding: 10px 20px;
  background-color: #CC393E;
  display: inline-block;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  font-size: 24px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Helvetica, sans-serif;
}

nav a:hover {
  background-color: #af2c30;
}

＆＃13;

<nav>
  <a href="#">Home</a>
  <a href="#">Tracks</a>
</nav>

＆＃13;

这是一个非常简单的问题，你不需要使用javascript

悬停图像不显示......？

2 个答案: