：悬停功能不能打开弹出框

问题描述：

我创建了一个基本的弹出窗口，它在悬停时打开。但是，至今我一直无法工作。以下是我打算创建的弹出窗口的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>

谁能告诉我如何得到这个工作，当鼠标悬停的文本应旁边的图标？

另外，是否有可能让文本保持到另一个图标悬停为止？

感谢

答

一个可能的解决办法是这样的：

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

答

我看不出有任何的图标有诠释，他的标记，但我已经做了以下的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

我不是前任确定你想要什么，但让我知道如果这不是确切的解决方案

答

这是关于定位。

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

在这里你可以看到例如https://jsfiddle.net/dhgz02eL/

你的代码是相当混乱，所以我改变了一点。关闭标签不正确，您应该使用CSS字体样式代替<font>

答

您正在使用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'; 

});

元素将显示，即使您移动鼠标离开前的元素，但是你可以通过类似于我的例子写的东西处理这些案件。

：悬停功能不能打开弹出框

相关推荐