Question

我有以下HTML：

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

我想这样做，以便带有子元素的父div作为1个实体。因此，例如，您可能不会选择（突出显示）子元素，或者在任何地方（在div内部，在子项或空格上）触发父项单击时单击事件。

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

Answer 1

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

Here's a demo of that approach

添加的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");
 });

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

2 个答案: