css - 文本下的悬停间距

Question

我希望你能帮我解决这个问题。我想扩大悬停和文本之间的空间。

图片:

#menu {
    float: right;
    height: 30px;
    margin: 50px 70px 0;
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
}

#menu a:hover {
    background: url(images/hover.png) repeat-x;
}

所以我的问题是:

1. 如何扩大文本菜单和悬停按钮之间的间距？
2. 如何使悬停的长度与文本一致？
3. 如何使悬停在事件页面上保持可见？

Answer 1

1. 如何扩大文本菜单和悬停图像之间的间距？
   添加 padding-bottom: 12px。将 12px 更改为您选择的值，这会调整水平间距。将 0 bottom 添加到 background 标记，这会使图像保持在链接的底部。

2. How to restrict hover length of hover to text?
   将您的padding添加到margin属性并执行远离填充物。这意味着背景图片长度将与文本长度匹配。

3. How to make hover stay visible on active page?
   要让事件页面悬停保持可见，你可以给当前事件页面一个类selected 。如答案底部的 HTML 所示。

CSS:

#menu {
    float: right;
    height: 30px;
    margin: 62px 82px 12px 12px; /* Adjust margin to include the padding */
    width: 530px;
}

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    /* Remove your padding here. Has been adjusted in the margin */
    padding-bottom: 12px; /* Adjust to change the hover spacing */
    text-decoration: none;
}

#menu a:hover, #menu a.selected {
    background: url(images/hover.png) repeat-x 0 bottom;
}

HTML(selected 类的用法示例):

<div id="menu">
    <a href="l1.html">Link 1</a>
    <a href="l2.html" class="selected">Link 2</a>
    <a href="l3.html">Link 3</a>
</div>