：懸停功能不能打開彈出框

我創建了一個基本的彈出窗口，它在懸停時打開。但是，至今我一直無法工作。以下是我打算創建的彈出窗口的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>

誰能告訴我如何得到這個工作，當鼠標懸停的文本應旁邊的圖標？

另外，是否有可能讓文本保持到另一個圖標懸停爲止？

感謝

來源

2016-07-23 Whisetter46

一個可能的解決辦法是這樣的：

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);

來源

2016-07-23 16:09:48 Bart

我看不出有任何的圖標有詮釋，他的標記，但我已經做了以下的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

我不是前任確定你想要什麼，但讓我知道如果這不是確切的解決方案

來源

2016-07-23 16:10:24

這是關於定位。

要使用CSS，您必須在#youtube之後直接放置#youtube-popup。

在這裏你可以看到例如https://jsfiddle.net/dhgz02eL/

你的代碼是相當混亂，所以我改變了一點。關閉標籤不正確，您應該使用CSS字體樣式代替<font>

來源

2016-07-23 16:14:23 jakob

您正在使用Sibling Selector，這意味着您正在嘗試選擇位於DOM中同一級別的元素。

但是，情況並非如此#youtube和#youtube-popup彼此不接近，這使得使用CSS選擇器很難解決。

你可以通過改變你的HTML或Javascript來解決這個問題。使用HTML，您必須將您的整個#youtube-popup放在#youtube（在.hover之內）旁邊。有了這個解決方案，你不需要改變你的CSS。

如果您希望文本保留，即使刪除了鼠標後，也應該使用JavaScript。

利用onmouseover Event。當你將鼠標移動到元素或它的子元素時，甚至會調用它。要處理鼠標離開elemnt或其子時，請參閱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'; 

});

元素將顯示，即使您移動鼠標離開前的元素，但是你可以通過類似於我的例子寫的東西處理這些案件。

來源

2016-07-23 16:57:41

：懸停功能不能打開彈出框

回答

相關問題