How to select a child element that is neighbor to :hover

Question

Hello I want to display a frame window after I hover over the button

ul li div, ul li div iframe {
 background-color: rgba(237, 239, 242,0.9);
 margin-top: 50px;
 opacity: 0;
}

.prayer-time:hover ~ div, div #prayerTime  { opacity: 1 }

<ul class="upperUl">
     <li> <a class="prayer-time" href="https://www.albayan.ae/prayer-time" target="_blank"> <b> Prayer Time   </b> </a>
      <div>
       <iframe id="#prayerTime" src="https://www.albayan.ae/prayer-time" width="400" height="400" name="Prayer time">
       </iframe> 
      </div>
     </li>

can anyone tell me what is the wrong with css second selection for (Oppacit:1) ??

with this current code I can only see the div while hovering on the button but I can't see the content of iframe element !! — Let.Simoo, Dec 30 '18 at 10:22

score 0 · Answer 1 · answered Dec 30 '18 at 10:43

Set the style to wrap div of iframe instead to iframe

ul li div, ul li .hide {
 background-color: rgba(237, 239, 242,0.9);
 margin-top: 50px;
 opacity: 0;
}

.prayer-time:hover ~ .hide  { opacity: 1 }

<ul class="upperUl">
 <li> <a class="prayer-time" href="https://www.albayan.ae/prayer-time" target="_blank"> <b> Prayer Time   </b> </a>
 <div class="hide">
 <iframe id="#prayerTime" src="https://www.albayan.ae/prayer-time" width="400" height="400" name="Prayer time">
 </iframe> 
</div>
</li>

tell me for more help – לבני מלכה Dec 30 '18 at 10:43 — לבני מלכה, Dec 30 '18 at 10:43

How to select a child element that is neighbor to :hover

1 Answers1