html - Apply a CSS style to a child span with a dynamic id on hover of a parent div with a dynamic id

Question

I have multiple parent divs that each contain multiple child spans. Only a select one of these spans do I want to hide upon hovering of the parent div. Currently, I am grabbing all of the parent divs like this:

div[id*=timeline_record_container]

Each of these parent divs contains the string timeline_record_container followed by a unique and dynamic ID. Then I am doing something similar with it's children:

span[id*=timeline_record_default_icons] 

Where they all have the string timeline_record_default_icons followed by a unique/dynamic ID as well. Adding both of these selectors together and the hover event gives me something like this:

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

My thought here is on hover of timeline_record_container divs, find the timeline_record_default_icons one and set it to display: none. However this isn't working, am I ordering these wrong?

Edit: I added the HTML. The highlighted span is what I want to hide inside of the top level div in the image.

标签： htmlcss

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