1

当我悬停导航链接时，我试图显示带有一些文本的背景图像，但由于某种原因，图像不会显示。

这里的一些标题 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

4

4 回答 4

5

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

看看小提琴。

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

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

我实际上再次更新了它：

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

这次我补充说：

top: -35px;

对于h1和放

positon: relative;

为了li

于 2013-07-17T12:52:20.187 回答
1 
.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 }
于 2013-07-17T12:53:50.970 回答
1

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

.navigation:hover h1 {
    display: block;
}
于 2013-07-17T12:53:04.427 回答
1

您可以将鼠标悬停在 css 中：

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

并调整位置。

于 2013-07-17T12:57:32.440 回答