Question

我有一个按钮，当悬停在上面时，我想要显示背景图像。（箭头是按钮的说明）。有很多相似的问题，但我无法完全调整为我工作的答案。

HTML看起来像

<div id="header_feedback">
    <a href="#contactForm">
        <img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
    </a>
</div>

CSS然后是

#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}

#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}

非常欢迎任何想法！

Answer 1

这里的主要问题不在于您的CSS。 Itagi's answer正确识别了您在url与parens /地址之间没有空格的小问题。

但还有两个更大的问题：

无效的图片网址：应用后，background: url('./img/addevent_tip.png');无法找到有效的图片。要解决此问题，您需要两个句点或零。因此，background: url('/img/addevent_tip.png');或background: url('../img/addevent_tip.png');
应用于不透明图片的背景不可见：由于div的整个内容都是图片，而且该图片没有透明度，因此您甚至无法看到悬停变化当它正确发生时。您可以通过使图像的一部分透明（并且可能为非悬停状态设置背景，使其看起来像通常那样）来调整，或者放弃图像以支持CSS spriting。 / LI>

Answer 2

您只需要通过以下方式进行更改：

#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}

'url'和实际网址之间没有空格

Answer 3

#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}

背景图像出现在悬停上

3 个答案: