在悬停时显示背景图像

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