HTML+CSS details summaryの横並びが絶望的です

Question

前提・実現したいこと

HTML+CSSでdetails summaryでメニューを作り、横並びに配備しました
しかし、そこで一つ問題が発生しました
details summaryで作られたものは、そのwidthの幅内でしか、マウスイベントが有効にはならない点です
サンプルソースでご確認いただければわかるのですが、
menu1と書かれてる部分をマウス通過しないで、
menu2を通過した場合に、hoverが発生しません
何かいい方法はありませんでしょうか？

該当のソースコード

<style>
body,html {
  height:100%;
}
.hover_color {
  transition: all 0.3s ease;
}
.hover_color:hover {
  background-color: hotpink;
}
summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  background-color: gray;
  transition: 0.2s;
}
summary:hover {
  background-color: darkgray;
}
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: gray;
}
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: silver;
}
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>

<div style="background-color:blue;width:100%;height:100%">

<details open id="d1" style="margin-left:20%;width:20%;height:100%;float:left">
<summary style="height:5%" onclick="d2.removeAttribute('open');d3.removeAttribute('open');d4.removeAttribute('open')">Menu1</summary>
<div class="details-content" style="height:95%;width:100%">
<div style="background-color:red;margin-left:-100%;width:500%;height:100%">
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
</div>
</div>
</details>


<details id="d2" style="width:20%;height:100%;float:left">
<summary style="height:5%" onclick="d1.removeAttribute('open');d3.removeAttribute('open');d4.removeAttribute('open')">Menu2</summary>
<div class="details-content" style="height:95%;width:100%">
<div style="background-color:green;margin-left:-200%;width:500%;height:100%">
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
</div>
</div>
</details>


<details id="d3" style="width:20%;height:100%;float:left">
<summary style="height:5%" onclick="d1.removeAttribute('open');d2.removeAttribute('open');d4.removeAttribute('open')">Menu3</summary>
<div class="details-content" style="height:100%;width:100%">
<div style="background-color:blue;margin-left:-300%;width:500%;height:100%">
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
</div>
</div>
</details>


<details id="d4" style="width:20%;height:100%;float:left">
<summary style="height:5%" onclick="d1.removeAttribute('open');d2.removeAttribute('open');d3.removeAttribute('open')">Menu4</summary>
<div class="details-content" style="height:100%;width:100%">
<div style="background-color:yellow;margin-left:-400%;width:500%;height:100%">
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
<div style="width:100%;height:25%;" class="hover_color">sample</div>
</div>
</div>
</details>

Comments

[m.ts10806]

>の横並びが絶望的です

個人の感覚より起きている現象や実現したいこと
「要件」をそのまま記載してください。

[m.ts10806]

あと提示されたCSSは.cssに記載したものですか？
HTMLに書いたものですか？
前者なら動かないのは当然です。.cssにstyleタグは不要。

[aze]

すみません、分かりやすく分けたつもりでしたが、
.cssでではなく同一ページに書いております

[m.ts10806]

コピペで再現できるコートにしてください。
コードブロックが分かれている場合は通常、別ファイルとして認識します。

ただ、その前に、インラインスタイルを入れすぎな方が絶望的に思います（メンテナンス性、可読性の観点で）

[aze]

コピペで再現できるコードにしました
details summaryのwidthを指定して横並びにした場合に、
details内部の幅をいくら広げても、summaryの部分をマウスで通過しないとマウスイベントが発生しない現象を、
突破できる方はいらっしゃいませんでしょうか？

Answer 1

<details open id="d1" style="margin-left:20%;width:20%;height:100%;float:left">
というように details に height:100% を設定しているのが原因ですね。
この為に後の details が前の details-content を覆っているのでホバーが効かないのです。
この height:100% を削除してください。

あるいは、このインラインのstyleをすべて削除して、CSSの方に纏めて記述したほうが管理しやすいと思います。下記のように一か所に記述するだけで済みます。

details {
  margin-left:20%;
  width:20%;
  float:left
}

Comments

[aze]

回答ありがとうございます
全てのdetails heightを取っ払いましたら、無事hoverが効くようになりました
ありがとうございます

しかし、この場合でheightの%を設定したい場合、どうしたらいいのでしょうか？
全体をheight:100%;にし、menuと書かれている部分をheight:5%;、
summaryのdetails-contentを95%にしたいのですが

[aze]

高さの部分は、投稿時のソースの形のまま（レイアウト上）、ホバーを効かせるという形にしたいと思ってるのですが、
お教えいただけないでしょうか？

details heightを取っ払った為、子を%指定にて収めることができなくなってます
pxでしたら指定できると思いますが%で指定したいです

[hatena19]

下記のようにdetailsに%で高さを指定して子は100%にすればいいでしょう。

<details open id="d1" style="margin-left:20%;width:20%;height:5%;float:left">
<summary style="height:100%" onclick="d2.removeAttribute('open');d3.removeAttribute('open');d4.removeAttribute('open')">Menu1</summary>

ただし、高さを%で指定するのはどうかと思います。画面の高さを広げると間が空くし、縮めるすぎると収まらなくなります。フォントサイズに合わせた固定サイズにすべきでしょう。

[hatena19]

あと、インラインスタイルでCSSを設定するのはやめた方かいいでしょう。修正するのがすごく面倒くさいです。
また、float:left での横並びはやめて、FlexBoxで一から作り直した方がシンプルになるし自由度が高いです。float だと後の要素のレイアウトに影響したりいろいろ面倒です。