CSS / HTML只有弹出解决方案悬停在链接，以包含文本，链接和图像

Question

我想要的东西可能太简单了，我被我找到的回答弄得有点不知所措!

* * * 我喜欢纯CSS/HTML作为我不使用javascript解决方案。 * * *

我现在正在做的是使用锚标记内的TITLE属性来显示有关链接的信息(参见:http://www.helpdesk.net.au/index_safety_driver.html和鼠标悬停在一些链接上)。

我想做的是有一些更灵活和有趣的内容，所以我正在寻找浮动在悬停的链接上的DIV而不是TITLE(我可以在DIV不支持的情况下留下TITLE -作为一个failsafe?)。

我喜欢在http://www.barelyfitz.com/screencast/html-training/css/positioning/的概念，但希望在左上角有一个图像的选项。

Answer 1

这是我更新的jsfiddle。使用一般的css类，你可以重用和淡出效果和鼠标退出延迟。前两个css类是你在代码中需要的，其余的只是举例。

http://jsfiddle.net/ctJ3d/8/

.popupBox {
    visibility:hidden;
    opacity:0;        
    transition:visibility 0s linear 0.3s,opacity 0.3s linear;
    transition: all 0.4s ease;
    transition-delay:  1s;
}
.popupHoverElement:hover > .popupBox {
    visibility:visible;
    opacity:1;
    transition: all 0.3s ease;
    transition-delay:  0s;        
}       
#button {
    background:#FFF;
    position:relative;
    width:100px;
    height:30px;
    line-height:27px;
    display:block;
    border:1px solid #dadada;
    margin:15px 0 0 10px;
    text-align:center;
}
#two {
    background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #DADADA;
    color: #333333;
    overflow:hidden;
    left: 0;
    line-height: 20px;
    position: absolute;
    top: 30px;
}
<div id="button" class="popupHoverElement">
    <h3>hover</h3>
    <div id="two" class="popupBox">Hovered content</div>
</div>

Answer 2

我试图从你的问题中获得我所理解的一切。查看此处:http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML:

<div id="button"><h3>button</h3>
<div id="two">Hovered content</div>
</div>

CSS:

#button {
background:#FFF;
position:relative;
width:100px;
height:30px;
line-height:27px;
display:block;
border:1px solid #dadada;
margin:15px 0 0 10px;
text-align:center;
}
#two {
background: none repeat scroll 0 0 #EEEEEE;
border: 1px solid #DADADA;
color: #333333;
width:98px;
height: 0;
overflow:hidden;
left: 0;
line-height: 20px;
position: absolute;
top: 30px;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
#button:hover > #two {
display:block;
left:0px;
height:100px;
}

Answer 3

有一个叫做性感工具提示的教程，可能正是你正在寻找的。有两件事需要注意:

1. 这个解决方案要求你的工具提示在你的HTML标记中，而不是直接从title属性读取。在HTML的语义方法中，我认为这是错误的方法。使用CSS3，可以利用title属性作为伪元素的content属性的值。但是，如果不使用Javascript取消默认的工具提示，两个工具提示都将出现(参见这个演示jsfiddle)。关于这项技术的更长的讨论，它的实现和问题，可以在CSS3只有工具提示和堆栈溢出:如何改变锚标记内标题属性的样式?
2. 如果您仍然支持旧的浏览器，请注意IE7将不服从:hover选择器，但A标签。如果你需要工具提示出现在IE7的任何元素，但A标签，你需要使用Javascript添加/删除类的元素悬停和样式使用该类。

Answer 4

<div id="one"><h3>hover over me</h3>
    <div id="two">Hovered content</div>
</div>
#one {
    background:#443322;
    position:relative;
    width:100px;
    height:30px;
    display:block;
    color:#FFFFFF;
}
#two {
    background:#223344;
    position:absolute;
    width:100px;
    height:100px;
    display:none;
    color:#FFFFFF;
}
#one:hover #two {
    display:block;
    left:100px;
}