DIV 锚标签：使内部 div 单独可点击答案

【问题标题】：DIV anchor tag : Make inner div alone clickableDIV 锚标签：使内部 div 单独可点击
【发布时间】：2013-06-04 18:31:29
【问题描述】：

<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

【问题讨论】：

标签： html anchor mouseover

【解决方案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>

希望这会有所帮助。

【讨论】：

太棒了！这是一个很好的解决方案。

【解决方案2】：

inner div和outer div几乎一样高，你确定是带边框的outer div而不是inner吗？

【讨论】：

是的，两者高度相同。即使我降低高度，手鼠标指针也会出现在内部 div 的左侧和右侧。是的，它是外在的。这就是为什么我尝试使用彩色边框:)

【解决方案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/

【讨论】：

仅供参考，如果您将鼠标移动到按钮底部红色边框上方 2-3 像素以上，则它不起作用。为此，需要将带有 padding-bottom: 6px; 的额外代码插入到带有航班文本的内部 div 中。 - @罗伯特