HTML+CSS detailsを入れ子にした場合の動作がおかしいです

Question

detailsを入れ子にした場合に、入れ子のdetailsのhover等、CSSの設定が効かない状態となっております

親をクリックしたりホバーすると親にはCSSが適応されますが、
子には一切CSSのホバー等が無効となります

この問題を解決する方法をご存じの方、教えていただけませんでしょうか？

<details style="width:15%;height:50px;float:left">
<summary style="height:100%">親1</summary>
<div class="details-content" style="height:100%;width:100%">
<div style="width:100%;height:1000%;background-color:red">

<details style="width:100%;height:100px"><!-- hover等無効になる部分 -->
<summary style="height:100%">子1</summary>
hello
</details>

</div></div>
</details>


<details style="width:15%;height:50px;float:left">
<summary style="height:100%">親2</summary>
<div class="details-content" style="height:100%;width:100%">
<div style="width:100%;height:1000%;background-color:red">

<details style="width:100%;height:100px"><!-- hover等無効になる部分 -->
<summary style="height:100%">子2</summary>
hello
</details>

</div></div>
</details>

<style>
body,html {
  height:100%;
}
summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  background-color: green;
  transition: 0.2s;
}
summary:hover {
  background-color: skyblue;
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  width: 16px;
  height: 16px;
  background-color: deepskyblue;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid white;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] summary {
  background-color: yellow;
}
details[open] summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
</style>

Comments

[miyabi_pudding]

ブラウザは何で見ていますか？

[退会済みユーザー]

Firefoxです

Answer 1

セレクターを details[open] summary というように半角空白で区切ると、子孫要素のsummaryすべてに適用されます。
details[open] summary と summary:hover では前者の方が詳細度が高いので親要素が開いている場合は前者の方が優先されます。

直下の子要素のみに限る場合は、details[open] > summary としてください。

子結合子 - CSS: カスケーディングスタイルシート | MDN

Comments

[退会済みユーザー]

毎度的確な回答をありがとうございます。。。！！
半分あきらめていたので最高な気分です＞＜
今後ともよろしくお願いいたします

Answer 2

オープン時に黄色になったまま、ホバーしても色が変わらないという点については、オープン時のsummaryのスタイルbackground-color: yellow;が優先されているからでは。

details[open] summary:hover {
    background-color: skyblue;
}