Question

我正在尝试获取包含图片的链接（<a></a>），当链接悬停在其下方时出现悬停菜单（在这种情况下，只有一个按钮）。出现的按钮，我希望有一个链接。

HTML：

<a href="#">
  <img src="My_Image.jpg" width="420" height="280" />
  <ul>
      <a><li>Buy</li></a>
  </ul>
</a>

CSS：

a {
  padding: 5px; margin: 0px;
  position: relative;
  display: inline-block;
}
a ul{
  padding: 0px; margin: 0px;
    list-style: none;
    position: absolute;
    left: -9999px;
  width: 100%;
}
a ul li{
  padding: 5px;
  background-color: black;
  white-space: nowrap;
  text-align: center;
}
a:hover ul {
  left: 0;
}

我的麻烦是，当我在a标记内添加链接（ul）标记时，ul及其所有后代的css格式不再适用。我希望这很清楚，如果你需要我解释一下，请告诉我。

Answer 1

您的语法“不正确”。规范禁止内联元素中的块元素。如果您需要创建基于列表的菜单，请在链接标记后设置“子菜单”：

 <ul>
      <li>
           <a href="#">Your Link</a>
           <ul>
                <li><a href="#">Sublink</a></li>
           </ul>
      </li>
 </ul>

Answer 2

从您对Adrian的第一条评论中，您希望链接文字显示在图像顶部，并且将鼠标悬停在图像上方时，图像下方会显示购买按钮。假设这可能有效：

div {
    padding: 5px; margin: 0px;
    position: relative;
}
div ul{
    list-style: none;
    display: inline-block;
}
div ul li{
    padding: 5px;
    white-space: nowrap;
    text-align: center;
    margin-bottom: 10px;
}
div ul li a{
    position: relative;
}
div ul li a span{
    position: absolute;
}
div ul li button{
    visibility: hidden;
}
div ul li:hover button{
    visibility: visible;
}

和HTML之类的东西：

<div>
  <ul>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 1</button>
      </li>
      <li><a href="#"><img src="My_Image.jpg" width="420" height="280" /><span>Description</span></a>
        <br/><button>Buy Image 2</button>
      </li>
  </ul>
</div>

链接上的悬停菜单有问题

2 个答案: