仅用于将鼠标悬停在链接上的 CSS / HTML 弹出解决方案，以包含文本、链接和图像

CSS / HTML only popup solution for hover over link, to contain text, links and images

提问by Mark Martin

What I want is perhaps too simple, and I'm a bit overwhelmed by the responses I find!

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

***I'd prefer a pure CSS/HTML solution as I don't use javascript.***

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

What I'm doing at the moment is to use the TITLE attribute within an anchor tag to display information about the link (see: http://www.helpdesk.net.au/index_safety_driver.htmland mouseover some of the links).

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

What I'd like to do is to have something a bit more flexible and interesting for that content and so I'm looking at floating a DIV over a link on hover instead of TITLE (can I leave TITLE in in case the DIV isn't supported - as a failsafe?).

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

I like the concept at http://www.barelyfitz.com/screencast/html-training/css/positioning/but would like to have the option of an image in the top left corner.

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

回答by Tone ?koda

Here is my updated jsfiddle. Using general css classes which you can reuse and with fade effect and with mouse out delay. The first two css classes are what you need in your code, rest is just for example.

这是我更新的 jsfiddle。使用可以重用的通用 css 类，并具有淡入淡出效果和鼠标移出延迟。前两个 css 类是您在代码中需要的，其余的只是举例。

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

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>

回答by Rakesh Vadnal

I tried to achieve whatever I understood from your question. Check the fiddle here: http://jsfiddle.net/rakesh_vadnal/RKxZj/1/

我试图实现我从你的问题中理解的任何东西。在这里检查小提琴：http: //jsfiddle.net/rakesh_vadnal/RKxZj/1/

HTML:

HTML：

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

CSS:

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

回答by thirdender

There is a tutorial called Sexy Tooltips with Just CSSthat might be exactly what you're looking for. There are two things to watch for:

有一个教程叫做“ Sexy Tooltips with Just CSS”，这可能正是您要找的。有两点需要注意：

1. This solution requires that your tooltip be in your HTML markup, instead of reading from the titleattribute directly. In a semantic approach to HTML, this strikes me as the wrong approach. Using CSS3, it's possible to utilize the titleattribute as the value of the contentproperty for a psuedo-element. However, without using Javascript to cancel the default tooltip, both tooltips will appear (see this demo jsfiddle). A much lengthier discussion of this technique, its implementation and issues, can be found at CSS3 Only Tooltipsand Stack Overflow: How to change the style of Title attribute inside the anchor tag?
2. If you are still providing support for older browsers, be aware the IE7 will not obey the :hoverselector for anything but Atags. If you need the tooltips to appear in IE7 for any element but an Atag, you'll need to use Javascript to add/remove a class from the element on hover and style using that class.

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

回答by eteich

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