代码之家 › 专栏 › 技术社区 › arakarenina

CSS:<a>标记在使用伪元素后被禁用

pseudo-element absolute anchor hyperlink css

-1

arakarenina · 技术社区 · 11 年前

我正在做一个CSS练习,其中将克隆旧的BBC网站。最初的问题是#topmenu li的白色底部边框看起来很不稳定(我在下面的页面中添加了这段代码作为注释)

通过使用伪元素添加右红色边框,已经解决了这个问题。但是,定位标记已被禁用。我认为这是由于红色边框的“绝对”位置,但如果没有绝对位置,我无法使菜单显示为应有的样子。现在,它看起来是我想要的,但顶部菜单链接不再工作: http://jsbin.com/poginowibe/1/edit?output

关于如何解决这个问题有什么想法吗?如有任何帮助,将不胜感激。

/*这是白色底部边框出现奇怪时的原始代码*/

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    border-right: 1px solid #990800;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

/*这是修复了不稳定的外观但禁用了标记后的代码*/

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    padding: 14px 15px 8px 15px;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0; left: 0; right: 0;
    border-right: 1px solid #990800;
}

通过对乔伯格的代码进行一些调整,我终于能够让它工作了!

#topmenudiv ul {
    margin-top: 0px;
    padding: 0;
}

#topmenudiv li {
    list-style: none;
    height: 38px;
    line-height: 40px;
    float: left;
    position: relative;
    z-index: 3;
}

#topmenudiv li:hover {
    color: #ffffff;
    text-decoration: none;
    border-bottom: 3px solid #FFFFFF;
    outline: 0;
}

#topmenudiv li a {
    height: 100% !important;
    font-size: 1em;
    line-height: 40px;
    border-right: 1px solid #990800;
    display: block;
    padding-left: 15px;
    padding-right: 15px;
}

#topmenudiv li a:hover {
    text-decoration: none;
}

非常感谢!:)

1 回复 | 直到 11 年前

1

0

Joerg 11 年前

从css中删除#topmnudiv li::after,并按以下方式更改#topmnediv li:

#topmenudiv li {
    list-style: none;
    height: 100%;
    padding: 14px 15px 11px 15px;
    float: left;
    position: relative;
    z-index: 1;
    border-right: 1px solid #990800;
}

使现代化

使用此代码并查看以下备注:

#topmenudiv ul {
   height: 40px;
   margin: 0;
   padding: 0;
}

#topmenudiv li {
   list-style: none;
   height: 40px;
   float: left;
   border-bottom: 3px solid #FFFFFF;
}

#topmenudiv li:hover {
  color: #ffffff;
  text-decoration: none;
  border-bottom: 3px solid blue;
  outline: 0;
}

#topmenudiv li a {
  height: 40px !important;
  font-size: 1em;
  line-height: 40px;
  border-right: 1px solid #990800;
  display: block;
  padding-left: 15px;
  padding-right: 15px;

}

#topmenudiv li a:hover {
  text-decoration: none;
}

删除CSS中的所有topenudiv内容,以及注释上方的这个内容。

我为蓝色的悬停设置了边框底线,所以你可以看到它是有效的。

您正在使用顶栏右侧的图像#sphere。这应该是CSS中的背景图像,因此您不必处理z索引,然后其他链接就可以工作了。

我所做的是,给a标记一些高度和行高度,并将红色边框绑定到它的左侧。我还删除了一些填充和边距。