Question

当我在浏览导航链接时，我正在尝试显示带有一些文字的背景图片，但出于某种原因图像不会显示。

这里有一些标题css

   .navigation h1 {
    position: absolute;
    right: 22px;
    top: -7px;
    display: none;
    padding: 4px 20px 4px 7px;
    color: #fff;
    white-space: nowrap;
    background: transparent url('http://i.imgur.com/dbnCNPk.png') 100% 50% no-repeat;
    }

HTML

<div class="navigation">
    <ul>
        <li>
            <h1>one</h1>
            <a href="#hem" class="active">one</a>                      </li>
        <li>    <h1>two</h1>
            <a href="#two">two</a></li>
        <li>    <h1>three</h1>
            <a href="#three">three</a></li>
    </ul>
</div>

小提琴

JSFiddle

Answer 1

http://jsfiddle.net/VBsDp/1/

查看小提琴。

您没有悬停类来显示h1。我补充说：

.navigation li:hover h1 {
    display:block;
}

我实际上已经更新了它：

http://jsfiddle.net/VBsDp/3/

这次我补充道：

top: -35px;

表示h1并输入

positon: relative;

代表li

Answer 2

您可以在悬停时更改h1的显示

.navigation:hover h1 {
    display: block;
}

Answer 3

.navigation h1 {
position: absolute;
right: 22px;
top: -7px;
display: none;  /*  <-- were you expecting some magic ? */
...
}

你的css改造看起来有点搞砸了。你只是'悬停'声明是：

.navigation a:hover{
border-radius:25px;
background-color:#f68A33;
}

巫婆不会达到你想要的。它只管理A标签。

因此，如果您希望在标记上执行某些操作，则必须对其进行范围化。

h1 { remove the display:none; h1 is block-level by default}
h1.hover {do your background thing here }

Answer 4

您可以将用户悬停在css中：

   .navigation h1:hover {
    background: transparent url('http://i.imgur.com/dbnCNPk.png') 100% 50% no-repeat;
    }

并调整位置。

在悬停时显示背景图像

4 个答案: