javascript 使用 :hover... 时如何使用 CSS 来定位 div 弹出窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8377904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use CSS to position div popup when using :hover...?
提问by jstacks
I am trying to create a popup in CSS. In this case, it's a small div containing text labeling the image you're hovering. However, I am definitely doing it wrong. I am either positioning the :hover div in CSS incorrectly (I've tried different positions (fixed, absolute, float, clear, etc.), but it keeps showing up inside the main div. I could wrong with my HTML, as I'm placing it within the main div that you hover for the popup to appear. But I'd think it has to be there to show up when you hover the main div. Any help is appreciated. Code below:
我正在尝试在 CSS 中创建一个弹出窗口。在这种情况下，它是一个包含标记您悬停图像的文本的小 div。但是，我肯定做错了。我要么在 CSS 中错误地定位 :hover div（我尝试了不同的位置（固定、绝对、浮动、清除等），但它一直显示在主 div 内。我的 HTML 可能出错，因为我'将它放在主div中，你悬停在弹出窗口中。但我认为当你悬停主div时它必须在那里显示。任何帮助表示赞赏。下面的代码：
HTML:
HTML：
<div class="topIcons topIconsHover topLabelHover">
<a href="image.html"><img src="icons/image.png" /></a>
<div class="topLabelHover">Image</div>
</div>
CSS:
CSS：
.topIcons {
padding:14px 6px 10px 6px;
float:right;
}
.topIconsHover:hover {
background-color:#555555;
cursor:pointer
}
.topLabelHover:hover {
background-color:#555555;
width:80px;
height:24px;
position:fixed;
top:40px;
}
I am fine with using JavaScript (or JQuery) if it's necessary, but it seems like something simple enough for CSS. Also, is it better to use CSS over JavaScript (or Jquery) when possible because perhaps it's faster? I could be mistaken there, but would be interested to of the best practice.
如果有必要，我可以使用 JavaScript（或 JQuery），但对于 CSS 来说，这似乎足够简单。另外，在可能的情况下，最好在 JavaScript（或 Jquery）上使用 CSS，因为它可能更快？我可能在那里弄错了，但会对最佳实践感兴趣。
edit* Still having trouble so thought I'd explain further what I'm trying to do with my page layout and perhaps it'll help. I have a series of icons in a navigation bar, all floated right. Upon hovering, I'd like the background to change (which I've managed in CSS with the "topIconsHover" class) and for a "label" div to appear beneath the related hovered icon div in the navigation bar when hovered.
编辑* 仍然有问题，所以我想我会进一步解释我想要用我的页面布局做什么，也许它会有所帮助。我在导航栏中有一系列图标，全部向右浮动。悬停时，我希望背景发生变化（我在 CSS 中使用“topIconsHover”类进行了管理），并希望在悬停时在导航栏中相关悬停图标 div 下方显示“标签”div。
采纳答案by Kevin Ennis
Think you want something like this:
认为你想要这样的东西：
.topIcons {
padding:14px 6px 10px 6px;
float:right;
}
.topIconsHover:hover {
background-color:#555555;
cursor:pointer
}
.topLabelHover {
display:none;
}
.topIconsHover:hover .topLabelHover {
display:block;
position:absolute;
background-color:#555555;
width:80px;
height:24px;
top:40px;
}
回答by Roko C. Buljan
Look here:
看这里：
DEMO
演示
Code used:
使用的代码：
HTML:
HTML：
<div class="imagebox">
<a href="image.html"><img src="http://dummyimage.com/300x120/444/cf5" /></a>
<div class="label">transparent Image label</div>
</div>
CSS:
CSS：
.imagebox{
position:relative;
margin:0 auto;
width:300px;
background:#eee;
}
.label{
position:absolute;
display:none;
top:0px;
padding:18px;
background:#fff;
}
jQuery:
jQuery：
$('.imagebox').bind('mouseenter mouseleave', function(e){
var label = $(this).children('.label');
m = (e.type === 'mouseenter') ?
label.stop(1).fadeTo(300,0.9) :
label.stop(1).fadeTo(300,0) ;
});
回答by Gordon Gustafson
You can only use the :hoverclass in CSS when you want to change the css of the element the :hover rule applies to.You came up with an interesting workaround in your code: using .topLabelHover:hoverto manipulate the CSS of multiple elements when any of them were hovered over. This will work, except you need to account for the fact that this will change the css of all elements with that class and not just the one hovered over. You can do this by making sure the CSS of the popup is the only one that changes by setting the CSS of the triggering element to the exact same thing:
:hover当您想更改:hover 规则适用的元素的css 时，您只能在 CSS 中使用该类。你在你的代码中想出了一个有趣的解决方法：.topLabelHover:hover当它们中的任何一个悬停在多个元素上时，使用它来操纵多个元素的 CSS。这将起作用，除非您需要考虑这样一个事实，即这将更改具有该类的所有元素的 css，而不仅仅是悬停在其上的元素。您可以通过将触发元素的 CSS 设置为完全相同的内容来确保弹出窗口的 CSS 是唯一更改的 CSS：
.topIcons {
position: absolute;
padding:14px 6px 10px 6px;
float:right;
}
.topIconsHover:hover {
background-color:#555555;
cursor:pointer
}
.topLabelHover {
display: none;
}
.topLabelHover:hover, .topIconsHover {
display: block;
background-color:#555555;
width:80px;
height:24px;
position:absolute; //makes the div appear 40px from the top of parent
top:40px;
}
However, IMHO this is very confusing to read. Your code would be a lot clearer, shorter, and simpler if you just used jQuery:
然而，恕我直言，这读起来很混乱。如果你只使用 jQuery，你的代码会更清晰、更短、更简单：
HTML:
HTML：
<div class="topIcons topIconsHover">
<a href="image.html"><img src="icons/image.png" /></a>
<div class="topLabelHover">Image</div>
</div>
Javascript:
Javascript：
$(".topIconsHover").hover( function() {
$(".topLabelHover").addClass("hovered");
});
Css:
css：
.topIcons {
position: absolute;
padding:14px 6px 10px 6px;
float:right;
}
.topIconsHover:hover {
background-color:#555555;
cursor:pointer
}
.topLabelHover {
display: none;
}
.hovered {
display: block;
background-color:#555555; //this,
width:80px; //this,
height:24px; //and this should be factored out into a separate class!
position: static; //revert to normal positioning.
}
The performance of the CSS version would be infinitesimally better, but since the Jquery version still takes far less than 100ms to show the pop it will feel just as instantaneous. :D
CSS 版本的性能会无限好，但由于 Jquery 版本仍然需要远远少于 100 毫秒的时间来显示 pop，它会感觉就像是瞬间一样。:D
EDIT: If you want to make the pop-up appear under the div, just put the <div>of the pop-up directly after the triggering div instead of inside it, and change the .hoveredcss to this:
编辑：如果你想让弹出窗口出现在 div 下，只需将<div>弹出窗口的 直接放在触发 div 之后而不是里面，并将.hoveredcss更改为：
.hovered {
background-color:#555555;
width:80px;
height:24px;
}
If you want to make a tooltip-like effect, just google 'jquery tooltip' and choose whatever extension best meets your requirements. :D
如果您想制作类似工具提示的效果，只需谷歌“jquery 工具提示”并选择最能满足您要求的扩展。:D
