css - 使父 div 块内部元素不被选中

Question

我有以下 HTML：

<div class="parent">
    <span>Random Elements</span>
    <img src="RandomeImage.png" />
    <etc...>
</div>

我想让它的父 div 及其子元素充当 1 个实体。因此，例如，您可能不会选择（突出显示）子元素，或者任何地方（在 div 内、子元素或空格上）的单击事件都会触发父单击。

我已经尝试了很多 CSS（块、浮点数，...），但我无法找出最终的解决方案。我会很感激你的帮助。

Answer 1

如果您不想使用 javascript 来执行此操作，您可以创建一个 divposition:absoulte;来覆盖整个父级及其所有子级，然后停止所有点击事件

这是该方法的演示

添加的 HTML 元素： <div id='cover'></div>

以及添加的 CSS：

.parent {
    background:teal;
    height: 500px;
    width:650px;
}
#cover {
    position:absolute;
    top:0; /* Same as object to cover up */
    left:0; /* Same as object to cover up */
    height:500px; /* Same as object to cover up */
    width:650px; /* Same as object to cover up */
    z-index:2; /* Higher than the object to cover up */
}

Answer 2

您不想选择元素只是突出显示它我更喜欢您可以使用Jquery（Javascript 框架）来做到这一点。

这是代码：

 $('.yourdiv').click(function(){
 $('.yourdiv').css("background-color","");
 $(this).css("background-color","blue");
 });​