3

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

图片：

例子

#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. 如何使悬停在活动页面上保持可见？
4

5 回答 5

1

改变背景图片的位置

background: url('images/hover.png') repeat-x 0 10px;

您是在谈论文本下悬停的长度吗？您可以添加一个“活动”类并将其设置为与悬停相同的样式，或者添加 :active 与#menu a:hover,#menu a:active

于 2013-07-15T12:59:14.277 回答
1
  1. 试试background-position。
  2. 当您尝试使图像符合文本的宽度时，请在您应用悬停的位置设置一个没有边距和填充的元素。
  3. 为您的活动元素附加一个额外的类：#menu a:hover, #menu a.active.
于 2013-07-15T13:01:38.500 回答
1

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

  2. 如何将悬停的长度限制为文本？
    改为将您添加padding到margin属性中并取消填充。这意味着背景图像长度将匹配文本长度。

  3. 如何使悬停在活动页面上保持可见？
    要使活动页面悬停保持可见，您可以为当前活动页面指定一个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>
于 2013-07-15T13:01:50.117 回答
1
  1. 给你a一个高度并将图像放在底部
  2. 更改padding为margin（元素外部的空间而不是内部）
  3. 做一个额外的课程，比如.focus
#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    display: inline-block;
    height: 60px;
    padding: 12px 12px 0 12px;
    text-decoration: none;
}

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

#menu a.focus {
    ... active link style
}
于 2013-07-15T13:02:02.300 回答
1

用这个：

#menu a {
    color: black;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 12px;
    text-decoration: none;
    padding-bottom: 20px;
    background-postion-y: -10px; 
}
于 2013-07-15T13:21:16.150 回答