3

我有一个按钮，当悬停在上面时，我希望背景图像也显示出来。（这是一个箭头按钮的解释）。有很多类似的问题，但我无法完全调整答案以适合我。

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');
}

任何想法都非常欢迎！

4

3 回答 3

1

这里的主要问题不在于您的 CSS。Itagi 的回答url正确地确定了您在括号/地址之间不能有空格的小问题。

但还有两个更大的问题：

  1. 无效的图片 url：应用时，background: url('./img/addevent_tip.png');找不到有效的图片。要解决此问题，您需要两个句点或零个句点。所以要么background: url('/img/addevent_tip.png');或background: url('../img/addevent_tip.png');
  2. 应用于不透明图像的背景不可见：由于 div 的全部内容是图像并且该图像没有透明度，因此即使它正确发生，您也无法看到悬停变化。您可以通过使图像的一部分透明（并且可能为非悬停状态设置背景，使其看起来像通常的方式）或放弃图像以支持 CSS spriting 来对此进行调整。
于 2012-05-17T14:12:54.350 回答
0

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

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

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

于 2012-05-17T13:46:56.230 回答
0 
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
于 2012-05-17T13:48:41.347 回答