Question

<div style="border: 1px solid lightgreen; height: 30px">
    <a href="#" style="text-decoration: none">
        <div
            style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px;">
            <div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">Flights</div>
        </div>
    </a>
</div>

这里我需要鼠标悬停手图标才会出现在内部div（带红色边框的div）上。实际上我已经将锚标签单独给了内部div。但它也适用于外部的那个.. !!

在此图片中简要解释：http://awesomescreenshot.com/01b1ctcn55

Answer 1

将display:table-caption;添加到内部div。

这是Working Solution。

守则：

<div style="border: 1px solid lightgreen; height: 30px;">
    <a href="#" style="text-decoration: none">
        <div
            style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px; display:table-caption;">
            <div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">Flights</div>
        </div>
    </a>
</div>

希望这有帮助。

Answer 2

内部div和外部div的高度几乎相同，你确定它是带边框的外部div而不是内部div吗？

Answer 3

您使用“a”标记封装嵌套div，使其中的所有内容都成为链接。试试这个：

<div style="border: 1px solid lightgreen; height: 30px">
  <div style="border: 1px solid red; width: 40%; margin-left: 30%; margin-right: 30%; height: 29px;">
    <a href="#" style="text-decoration: none">
      <div style="padding-top: 6px; font-size: 15px; padding-left: 45%;">
        Flights
      </div>
    </a>
  </div>
</div>

使用此选项，只有内部div成为链接。见这里：http://jsfiddle.net/8HG9N/8/

DIV锚标记：使内部div单独可点击

3 个答案: