cssでhoverを用いてカーソルを指定の位置に置いたときに中身を表示するコードを書いたのですが、その中身の上にカーソルを移動させると中身が消えます

下記のコードの「中身を表示」の部分でhoverで表示するように設定し、指定した部分の上にカーソルを置けば、中身が表示されるのですが、その表示された中身の位置にカーソルを移動させると中身が非表示になってしまいます。
中身にはURLが貼ってあるので、カーソルを中身の部分に動かしたときも表示したままにしたいのですが、どうすればよいでしょうか？

当方、CSSは初心者で以下のコードはググって調べたものをコピペしたものです。

HTML

<link rel="stylesheet" type="text/css" href="tesss.css">
<div id="contents">
  <div class="accbox">
    <div style="position:absolute; top:40px; left:30px">
  <label for="label1">一覧</label>
  
  <input type="checkbox" id="label1" class="cssacc" />
  <div class="accshow">
    <!--ここに隠す中身-->
    <p>
      URL
    </p>
  </div></div>

</div>

css

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*中身表示*/
.cssacc:hover + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}

yambejp

2019/07/22 01:49

HTMLも記載してください

mutsuki22

2019/07/22 01:50

このCSSを適応させているHTMLの提示もお願い出来たらと思います。

m.ts10806

2019/07/22 01:50

「文字の上に乗っているときにしか有効にならない」とかそういう感じですかね？

meitantei

2019/07/22 02:04

すみません。今追記しました。 mts10806さんその通りです。

m.ts10806

2019/07/22 02:06

細かいですが</div>が1つ足りない気がします（手元のエディタで警告が出ました）

yambejp

2019/07/22 02:07

＞「中身を表示」の部分が、どこなのか不明です

行動規範の内容に同意します

回答1件

ベストアンサー

現状のコードを活かしたまま簡単にしたいのでしたら、
hoverで隠していた要素が表示されるので、その隠していた要素のhoverを「中身表示」の指定に追加します。

css
1.cssacc:hover + .accshow
2,.accshow:hover
3    {
4    height: auto;
5    padding: 5px;
6    background: #eaeaea;
7    opacity: 1;
8}

蛇足：
どのようなエディタを使われているか分かりませんが、
コードフォーマット機能がついていたり、構文チェックをしてくれるエディタを利用されたほうが良いかと思います。
CSSは特に、HTMLの構文にミスがあると正しく反映されないことが往々にしてあります（JavaScriptも同様）

HTML構文をなおしたあと（</div>が1つ足りない）、コードフォーマットした例

html
1<div id="contents">
2  <div class="accbox">
3    <div style="position:absolute; top:40px; left:30px">
4      <label for="label1">一覧</label>
5      <input type="checkbox" id="label1" class="cssacc" />
6      <div class="accshow">
7        <!--ここに隠す中身-->
8        <p>URL </p>
9      </div>
10    </div>
11  </div>
12</div>