如何使具有不同锚元素的div的整个背景颜色可点击答案

【问题标题】：How to make the entire background color of a div having different anchor elements clickable如何使具有不同锚元素的div的整个背景颜色可点击
【发布时间】：2013-01-03 13:35:51
【问题描述】：

我有一个 html，其中一个 div 包含 2 个锚元素。如果我将样式类应用于具有某些背景颜色的单个元素，则整个背景都是可点击的。如果我对 div 应用样式类，那么两个锚元素都显示在背景上，但整个背景不可点击，只有单个锚元素可点击。

我不想使用任何 JS 或 jQuery。

<div id="" class="AccordionTab" name="">
    <table id="Nickname_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr id="Nickname_tr">
                <td id="Nickname_td">
                    <a id="Nickname" href="#BalanceDisplay">It is my nick Names</a>
                </td>
            </tr>
        </tbody>
    </table>
    <table id="AvailableTag_table" class="CommonTableClass" cellspacing="0" cellpadding="0" border="0">
        <tbody>
            <tr id="AvailableTag_tr">
                 <td id="AvailableTag_td">
                     <a id="AvailableTag" href="#BalanceDisplay" ">hi</a>
                 </td>
            </tr>
       </tbody>
   </table>
</div>

这里的 AccordionTab 是具有背景颜色的样式类。

如果我应用它<a id="AvailableTag" class="AccordionTab" href="#BalanceDisplay" ">hi</a>

对于单个锚元素，整个背景都是可点击的

【问题讨论】：

你能准确告诉我你想要什么吗？如果您设置a 背景颜色，它会影响所有其他元素，如tr, td ,a。对吗？

标签： css html clickable

【解决方案1】：

“可点击”是什么意思？

我怀疑您正在尝试仅使用 CSS 编写手风琴式控件。但是，一般来说，CSS 不允许您修改行为。这个责任留给了 JavaScript 的角色。

此外，CSS 允许您仅定位元素及其子元素，而不是其父元素。例如，您不能从Nickname 的上下文中选择Nickname_td。至少在 CSS3 中没有。（CSS4 可能会提供这个，但还有很长的路要走）。

如果您希望根据文档的状态修改行为，恐怕您可能不得不求助于某种 JavaScript。

【讨论】：