Question

当我将鼠标悬停在框上而嵌套了href时，如何使整个青色框（类名称导航）可点击？这可能吗？

JSFIDDLE LINK http://jsfiddle.net/K8w4g/1/

HTML

<a href="about.html">
<div class="nav-about">about
    <div class="sub-nav-about">
        <ul>
            <li><a href="1">1. one</a> </li>
            <li><a href="2">2. two</a></li>
            <li><a href="3">3. three</a></li>
        </ul>
     </div>
</div>

CSS

.nav-about {
float: left;
width: 254px;
height: 150px;
color: blue;
background-color: teal;
}

.sub-nav-about {
width: 150px;
}

.sub-nav-about ul {
list-style:none;
background-color:red;
}

Answer 1

不幸的是，这是不可能的。但是，您可以使用onclick：

通过javascript实现此目的

<div onclick="window.location.href='about.html'" class="nav-about">about
    <div class="sub-nav-about">
        <ul>
            <li><a href="1">1. one</a> </li>
            <li><a href="2">2. two</a></li>
            <li><a href="3">3. three</a></li>
        </ul>
     </div>
</div>

您仍然可以点击div内的链接。

另一个解决方案是将div替换为span，因为它仅对a等某些元素包含span标记有效，因此您的新代码会看起来像这样：

<a href="about.html"> <span onclick="window.location.href='about.html'" class="nav-about">about
            <div class="sub-nav-about">
                <ul>
                    <li><a href="1">1. one</a> </li>
                    <li><a href="2">2. two</a></li>
                    <li><a href="3">3. three</a></li>
                </ul>
             </div>
        </div>
</a>

嵌套a hrefs的问题

1 个答案: