：ホバー機能がポップアップを開けません

Question

私はホバーオーバーしたときに開く基本ポップアップウィンドウを作成しました。しかし、私はそれまでこれを動作させることができませんでした。以下は、私が作成しようとしているポップアップウィンドウの5つの部分の1つです。

#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の直後に#youtube-popupを入れなければなりません。

は、ここでは一例にhttps://jsfiddle.net/dhgz02eL/

を見ることができますあなたのコードはかなり厄介ですので、私はそれを少し変更しました。閉じたタグが正しくないため、<font>の代わりにCSSのフォントスタイルを使用する必要があります

Answer 4

Sibling Selectorを使用しています。つまり、DOMの同じレベルにある要素を選択しようとしています。

しかし、そうでない場合は#youtubeと#youtube-popupがお互いに近くないため、CSSセレクタで解決することが難しくなります。

これは、HTMLを変更するか、Javascriptを使用して解決できます。 HTMLを使用すると、#youtube（.hover）の隣に#youtube-popupの全体を置く必要があります。このソリューションでは、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'; 

}); 

要素は、あなたが離れて前部要素をマウスを移動しても表示されますが、あなたは、私が例に書いたものと同様のもので、これらのケースを扱うことができます。