Question

我正在尝试在CSS中创建一个弹出窗口。在这种情况下，它是一个小div，包含标记您正在悬停的图像的文本。但是，我肯定做错了。我要么在CSS中定位：hover div错误（我尝试了不同的位置（固定，绝对，浮动，清除等），但它一直显示在主div内。我可能错误的我的HTML，因为我将它放置在你为了弹出窗口而悬停的主div中。但是我认为当你悬停主div时它必须出现在那里。任何帮助都表示赞赏。代码如下：

HTML：

<div class="topIcons topIconsHover topLabelHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>

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

如果有必要，我可以使用JavaScript（或JQuery），但它似乎对CSS来说足够简单。另外，在可能的情况下使用CSS而不是JavaScript（或Jquery）会更好吗，因为它可能更快？我可能会错在那里，但会对最佳实践感兴趣。

编辑*仍然遇到麻烦，以为我会进一步解释我正在尝试使用的页面布局，也许它会有所帮助。我在导航栏中有一系列图标，都是向右浮动的。在悬停时，我希望更改背景（我在CSS中使用“topIconsHover”类进行管理）以及“标签”div在悬停时显示在导航栏中相关的悬停图标div下方。

Answer 1

认为你想要这样的东西：

.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;
}

http://jsfiddle.net/kHPZK/

Answer 2

看这里：

DEMO

使用的代码：

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：

  .imagebox{
    position:relative;
    margin:0 auto;
    width:300px;
    background:#eee;
  }
  .label{
    position:absolute;
    display:none;
    top:0px;
    padding:18px;
    background:#fff;
  }

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

Answer 3

当您想要更改hover规则适用的元素的css 时，您只能在CSS中使用:hover类。您在代码中想出了一个有趣的解决方法：当任何一个元素悬停在其上时，使用.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;
}

然而，恕我直言，这是非常令人困惑的阅读。如果你只使用jQuery，你的代码会更清晰，更简单，更简单：

HTML：

<div class="topIcons topIconsHover">
    <a href="image.html"><img src="icons/image.png" /></a> 
    <div class="topLabelHover">Image</div>  
</div>

使用Javascript：

$(".topIconsHover").hover( function() {
    $(".topLabelHover").addClass("hovered");
});

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.
}

CSS版本的性能无限小，但由于Jquery版本仍然需要远远不到100毫秒的时间来显示流行音乐，它会感觉瞬间。：d

编辑：如果你想让弹出窗口显示在div下面，只需将弹出窗口的<div>直接放在触发div之后而不是在其中，然后更改.hovered css对此：

.hovered {
    background-color:#555555;       
    width:80px;
    height:24px;
}

如果您想制作类似工具提示的效果，只需google'jquery tooltip'并选择最符合您要求的扩展程序。：d

使用时如何使用CSS定位div弹出窗口：hover ...？

3 个答案:

DEMO