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

我没有在标记处看到任何图标，但我已经完成了以下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，这意味着您正在尝试选择位于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';

});

即使将鼠标移到元素前面，该元素也会显示，但您可以通过类似于我在示例中所写的内容来处理这些情况。

：悬停功能无法打开弹出窗口

4 个答案: