hoverでiframeを表示する方法を知りたい。

Question

お初になります。
よろしくお願い致します。

質問内容(以下source記載ございます)
【要望】
ul.menuをホバー→a.unitをホバー→iframeが出てくる。のiframeを表示する部分の記述の仕方を教えていただきたい。
色々調べてみたんですが、分からず、こちら利用させて頂きますm(__)m

html

<div class="icon">MENU
  <ul class="menu">
     <li class="spread">
           <a class="unit" href="#">2</a>
     </li> <iframe src"〇〇html" frameborder="0" scrolling="no"></iframe>
   </ul>
 </div>

css

icon {
 
position: relative;

background: white;
 
cursor: pointer;
 
margin: auto;
 
color: deepskyblue;
 
border-radius: 50%;
 
height: 150px;
 
width: 150px;
 
line-height: 150px;
 
text-align: center;
 
font-size: 2.75em;
 
font-weight: bold;
 
transition: 0.24s 0.2s;
}

.menu {

position: absolute;
 
top: -75px;
 
left: -75px;
 
border: 150px solid transparent;
 
cursor: default;
 
border-radius: 50%;
 
transform: scale(0);
 
transition: transform 1.4s 0.07s;

z-index: -5;

}
.spread {
 
position: absolute;
 
top: -100px;
 
left: -100px;
 
transform-origin: 100px 100px;
 
transition: all 0.5s 0.1s;
}
.icon:hover .menu {
 
transition: transform 0.4s 0.08s, z-index   0s  0.5s;
 
transform: scale(1);
z-index: 5;
}
.icon:hover .spread, .icon:hover .unit {
 
transition: all 0.6s;

}
.icon:hover .spread:nth-child(1) {
 
transition-delay: 0.02s;
 
transform: rotate(85deg);
}

.icon:hover .spread:nth-child(1) .unit {
 
transition-delay: 0.04s;
 
transform: rotate(635deg);

}
.unit {
 
position: absolute;
 
background: white;
 
font-size: 60%;
 
text-decoration: none;
 
width: 45px;
 
height: 45px;

line-height: 45px;
 
color: dodgerblue;
 
border-radius: 50%;
 
transition: 0.6s;
}

body {
 
font-family: sans-serif;
 
background: radial-gradient(#00bfff, #1e90ff);

transform: translate3d(0, 0, 0);

}

Answer 1

cssだけで実装するなら隣接セレクタ等を使うことで実現できるかと思います。

<a class="unit" href="#">2</a>
<iframe class="frame" src="〇〇.html" frameborder="0" scrolling="no"></iframe>

iframe {
  display:none;
}
.unit:hover + iframe {
  display:block;
}

Comments

[espil]

回答誠に有難うございます。
まだ、次の壁でまた苦戦してますが、非常に勉強になりました。
私の投稿改行がおかしくなって分かりづらくなってますね。
またお力添え頂けたら幸いです。