: функция зависания не открывается всплывающее окно

Question

Я создал основное всплывающее окно, которое открывается при наведении курсора. Однако до сих пор я не смог заставить его работать. Ниже приведена одна из 5 частей всплывающих окон, которые я намереваюсь создать.

#youtube-popup { 
 
    display: none; 
 
} 
 

 
#youtube:hover + #youtube-popup { 
 
    display: inline; 
 
}

<div class="messagepop pop"> 
 
    <div id="youtube-popup"> 
 
     <font size=5><b>Title</b> 
 
    <br><font size=2> 
 
    Text would go here. 
 
    <br><font size=5><b>Title</b> 
 
    <br><font size=2>More text would go here. 
 
    </font></div> 
 
    </div> 
 

 
    <footer> 
 
    <div id="footer"></div> 
 
    <div class="container"> 
 
     <div class="row"> 
 
     <div class="col-lg-10 col-lg-offset-1 text-center"> 
 
      <br> 
 
      <ul class="list-inline"> 
 
      <div class="hover"> 
 
       <img href="" id="youtube" src="https://www.youtube.com/yt/brand/media/image/YouTube-icon-dark.png" width="10%" height="10%" padding="1px 1px 1px 1px"></div> 
 
      </li> 
 
     </div> 
 
     </li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div>

Может кто-нибудь сказать мне, как заставить это работать, как когда завис над, текст должен появиться рядом со значком?

Кроме того, возможно ли, чтобы текст оставался до тех пор, пока не будет виден другой значок?

Благодаря

Answer 1

Возможное решение может выглядеть следующим образом:

document.getElementById('youtube').addEventListener("mouseover", function(event) { 
    // set the display = "none" for all other popups 
    // (not shown) 

    // make the current popup visible 
    document.getElementById('youtube-popup').style.display = "block"; 
}, false); 

Answer 2

Я не вижу каких-либо иконки там Int он разметкой, но я сделал следующее Jquery

$('#youtube').mouseenter(function() { 
$('#youtube-popup').removeClass('puffOut').addClass('puffIn magictime'); 
}); 

$('#youtube-popup').mouseleave(function() { 
$(this).removeClass('puffIn').addClass('puffOut'); 
}); 

Ссылка http://codepen.io/damianocel/pen/YWaWJE

Я не бывший что вы хотели, но дайте мне знать, если это не точное решение.

Answer 3

Речь идет о позиционировании.

Для этого, чтобы работать с CSS, вы должны поставить #youtube-popup непосредственно после #youtube.

Здесь вы можете увидеть пример https://jsfiddle.net/dhgz02eL/

Ваш код довольно грязный, поэтому я изменил его немного. Закрытие тегов было неправильным, и вы должны использовать стиль шрифта CSS вместо <font>

Answer 4

Sibling Selector Вы используете Sibling Selector, что означает, что вы пытаетесь выбрать элементы, которые лежат на одном уровне в DOM.

Однако, это не тот случай, когда #youtube и #youtube-popup не находятся рядом друг с другом, что затрудняет решение с помощью селектора CSS.

Вы можете решить эту проблему либо с помощью изменения своего HTML, либо с помощью Javascript. С помощью HTML вы должны поместить весь ваш #youtube-popup рядом с #youtube (внутри .hover). С помощью этого решения вам не нужно менять свой CSS.

Если вы хотите, чтобы текст оставался, даже после удаления мыши, вы должны безоговорочно использовать JavaScript.

Использовать onmouseover Event. Это даже будет вызвано, когда вы наводите мышь на элемент или его дочерние элементы. Для управления, когда мышь УХОДЕТ элементу или его детям, см. onmouseout Event. В этом случае это не требуется.

var youtube = document.querySelector('#youtube'); 

var popup = document.querySelector('#youtube-popup'); 

youtube.addEventListener('onmouseover', function(){//There are alternative syntax options 

var otherPopup = document.querySelector('.otherpopup'); 
otherPopup.style.display = 'none'; //Disable previously opened popups 

popup.style.display = 'inline'; 

}); 

элемент будет отображаться даже при перемещении мыши в сторону переднего элемента, но вы можете обрабатывать эти случаи что-то подобное тому, что я написал в примере.