Question

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

目标：将鼠标悬停在导航项上时显示“图钉”背景图像。问题：当它延伸超过a：hover标记时，部分引脚会消失，因为背景图像比项目高

目前的css如下。所有父元素都设置为overflow：visible

.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 Elements。如果您需要锚点来显示它，但锚点太小。您需要将锚标记的大小更改为图像的大小。否则，您可以更改内部图像的背景大小以适合锚点。

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

背景图片上：悬停溢出

1 个答案: