html - 在具有动态 id 的父 div 悬停时将 CSS 样式应用于具有动态 id 的子 span

Question

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

div[id*=timeline_record_container]

这些父 div 中的每一个都包含字符串 timeline_record_container，后跟一个唯一的动态 ID。然后我正在对它的 child 做类似的事情:

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;
}