CSS problems :(

Question

嘿：）我一直在努力为我们的网站制作一些不错的悬停效果。但是，当页面加载时，它不会加载CSS背景图像，我们会得到一些奇怪的轻弹效果。我想的几乎都试过了。我们就是无法让它发挥作用。我将链接HTML和CSS来解决这些问题。

这是HTML，也是包含CSS的div。这个div在一个主内容div和一个内容div中。

<div class="produkt_links">
    <div id="produkt_7"><a href="produkt_1.html"></a></div>
</div>

CSS：

.produkt_links #produkt_7 a {
display: block;
width: 300px;
height: 290px;
background-image:url(../../images/mainpage%20links/arch_low.png);   
}
.produkt_links #produkt_7 a:hover {
background-image:url(../../images/mainpage%20links/arch_low_hover.png); 
}

PS。我试过精灵。不起作用。在Safari、Chrome和firefox中试用。。。

干杯MM。

Answer 1

您需要更正使用的（公共）资源的路径

background-image:url(../../images/mainpage%20links/arch_low.png);

---

如果根文件夹是public_html，则-

public_html
 > images
   > mainpage links
     > arch_low.png

然后使用这个-

background-image:url("images/mainpage%20links/arch_low.png");

Answer 2

您还没有编写太多其他代码，但我建议你先尝试在css中应用一些不是图像的东西。例如：

.produkt_links #produkt_7 a {
display: block;
width: 300px;
height: 290px;
color: blue;   
}
.produkt_links #produkt_7 a:hover {
    color:red; 
}

如果这不起作用，请检查CSS文件是否正确链接到HTML文件。

否则，请检查服务器上的映像路径是否正确。