在具有动态ID的父div悬停时，将CSS样式应用于具有动态ID的子范围

Question

我有多个父div，每个div包含多个子span。在悬停父div时，我只想隐藏其中一个跨度。目前，我正在像这样抓取所有父div：

div[id*=timeline_record_container]

每个父div均包含字符串timeline_record_container，后跟唯一的动态ID。然后我正在对孩子做类似的事情：

span[id*=timeline_record_default_icons] 

它们都带有字符串timeline_record_default_icons，后跟唯一/动态ID。将这两个选择器以及悬停事件加在一起，我得到的是这样的东西：

div[id*=timeline_record_container]:hover > span[id*=timeline_record_default_icons] {
    display: none;
}

我的想法是将鼠标悬停在timeline_record_container div上，找到timeline_record_default_icons并将其设置为display: none。但是，这不起作用，我订购的这些错误吗？

编辑：我添加了HTML。突出显示的跨度是我要隐藏在图像的顶级div中的内容。

Answer 1

在屏幕快照中，您要隐藏的span不是div[id*=timeline_record_container]的直接子对象。

请考虑以下代码段：

<div class="parent">
  <div class="brat">
    <span class="target">The target</span>
  <div>
</div>

在以上代码段中，要访问目标，您可以编写：

.parent .target {
  …
}

但不是：

.parent > .target {
  …
}

您可以直接访问.brat，因为它位于.parent节点下的第一个嵌套级别。

.parent > .brat {
  …
}

所以，回到您的示例。我认为只需在>之前删除span符号就可以解决问题。

div[id*=timeline_record_container]:hover span[id*=timeline_record_default_icons] {
    display: none;
}