0

嘿那里:) 我一直在尝试为我们的网站制作一些不错的悬停效果。但是,当页面加载时,它不会加载 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。

4

2 回答 2

0

您需要更正使用的(公共)资源的路径

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");

于 2013-08-04T20:46:52.903 回答
0

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

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

.produkt_links #produkt_7 a:hover {
    color:red; 
}

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

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

于 2013-08-04T20:47:22.873 回答