css - :hover overflow 上的背景图像

Question

到处搜索，尝试了几种技术，但还没有找到可行的答案。

目标:将鼠标悬停在导航项上时显示“固定”背景图像。 问题:部分图钉在超过 a:hover 标签时消失，因为背景图片比元素高

当前的 CSS 如下。所有父元素都设置为溢出:可见

.menu-primary a  {
   display: block;
   padding: 6px 0 6px 0;
   text-align: center;
   width: 184px;
   height: auto;
   margin: 0 5px 0 5px;
   position: relative;;
   overflow: visible;
}

.menu-primary li#menu-item-23 a {
   background-color: #dfe6ab;
   margin-left: 0;
   overflow: visible;
}

.menu-primary li#menu-item-23 a:hover,
.menu-primary li#menu-item-23:hover a {
   background: url(images/pin.png) no-repeat left 0px top -7px;
   background-color: #dfe6ab;
   color: #000000;
   overflow: visible;
   height: auto;
 }

欢迎所有建议。谢谢。

Answer 1

CSS 中的背景不像 Html 元素。如果你需要 anchor 来显示它，但是 anchor 太小了。您需要将 anchor 标记的大小更改为图像的大小。否则，您可以更改内部图像的背景大小以适合 anchor 。

此外，您在 .menu-primary a 中有一个重复的分号 (;)，请参阅: position:relative;;