0

我想要的可能太简单了，我对我找到的回复有点不知所措！

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

我目前正在做的是使用锚标记中的 TITLE 属性来显示有关链接的信息（请参阅：http ://www.helpdesk.net.au/index_safety_driver.html并将鼠标悬停在某些链接上）。

我想做的是为该内容提供一些更灵活和有趣的东西，所以我正在考虑将 DIV 浮动在悬停的链接上而不是 TITLE（我可以留下 TITLE 以防 DIV 不是' t 支持 - 作为故障保护？）。

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

4

4 回答 4

4

这是我更新的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>
于 2014-04-28T13:33:05.610 回答
1

有一个名为Sexy Tooltips with Just CSS的教程可能正是您正在寻找的。有两点需要注意：

  1. 此解决方案要求您的工具提示位于 HTML 标记中，而不是title直接从属性中读取。在 HTML 的语义方法中，我觉得这是错误的方法。使用 CSS3，可以将属性用作伪元素的属性title值。content但是，如果不使用 Javascript 取消默认工具提示，则会出现两个工具提示（请参阅此演示 jsfiddle）。可以在CSS3 Only Tooltips和Stack Overflow: How to change the style of Title attribute inside the anchor tag?
  2. :hover如果您仍在为旧版浏览器提供支持，请注意 IE7除了A标签之外不会服从选择器。如果您需要在 IE7 中为除A标签以外的任何元素显示工具提示，则需要使用 Javascript 在悬停时从元素中添加/删除类，并使用该类设置样式。
于 2012-12-22T05:42:19.693 回答
1

我试图从你的问题中实现我所理解的。在这里检查小提琴：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;
}
于 2012-12-22T05:14:50.337 回答
0 
<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;
}
于 2012-12-22T02:53:32.470 回答