html - 事件状态与 anchor 标记中的 block 元素保持一致

Question

我有这样的标记:

<dl class="synthModels">
    <a href="#" class="soundTest">
        <dt><span>Bass Drum</span></dt>
        <dd>Bass drum description.</dd>
    </a>
    <a href="#" class="soundTest">
        <dt><span>Bass Drum</span></dt>
        <dd>Bass drum description.</dd>
    </a>
</dl>

像这样的 CSS:

.synthModels a:hover dt {
    color: #ff571b;
}
.synthModels a:active dt {
    color: #aed9e0;
}

悬停效果很好，但由于某种原因，即使在您单击链接后事件状态仍保持事件状态，而不是仅在单击链接时。您可以在这里自己尝试一下，上面写着“Bass Drum”、“Synth Clap”等:

http://sans-concept.com/as/drumspillage.html

知道为什么会这样吗？我尝试删除 DL 并将 DT/DD 与 H3/P 交换，但问题仍然存在。感谢您的帮助!

Answer 1

我刚刚弄明白了。我尝试将 anchor 标记更改为 display:block，这绝对解决了问题。万岁!