3

当用户悬停图像时显示内容时，我正在尝试制作精美的悬停效果。我希望悬停气泡居中并位于图像顶部。

在这个小提琴中说明：http: //jsfiddle.net/sandrodz/TnEMU/

在 chrome 中尤其糟糕，其中 span 会自动变为 display:inline 悬停时的行为与 firefox 不同。将两者都作为块元素会有所帮助，但隐藏元素是平移的，它会自动获取 display:inline。关于如何解决此问题并使悬停直接出现在正确图像之上的任何想法？

谢谢！

4

2 回答 2

1

你去（用你的代码）

CSS变化：

#features_icons li span {
    top:0; /* ///added to fix in chrome ///*/
    left:0;/* ///added to fix in chrome///*/
    white-space:nowrap;/* ///added this line/// */
}
#features_icons li {
    position:relative;  /* ///added this line/// */
}

在 jquery 中，我刚刚添加了：outerWidth(true)以获得正确的尺寸：

spanW = ($(this).next("span").outerWidth(true) / 2) - ($(this).outerWidth(true) / 2);

您也可以尝试：以不同的方法<SPAN>删除所有元素：

jsFiddle 演示

在任何情况下，您的图标都需要一个 alt 属性......所以为什么不给每个图像提供 SPAN 文本：（任何 CMS 编辑器都允许您向图像添加alt.description文本。）

<img alt="Air Conditioning" src="http:conditioning.png" />


因此，您可以删除所有跨度，在<body>标记后附加：

<div id="tooltip"></div>

并使用我的脚本：

$("ul#features_icons li img").hover(function() {
           var altText = $(this).attr('alt');
           var thisW2   = $(this).outerWidth(true) / 2;
           var thisPosL = $(this).offset().left + thisW2;
           var thisPosT = $(this).offset().top;
           
           $('#tooltip').text(altText);
           var toolW2 = $('#tooltip').outerWidth(true) / 2; // after it's filled with text
           $('#tooltip').stop(1).fadeTo(200,1).css({left: (thisPosL-toolW2) , top:thisPosT});
    }, function() {
        $('#tooltip').fadeTo(100,0,function(){
           $(this).hide();
        });
    });
  • 它将计算图标位置
  • 抓住alt文字
  • #tooltip用 xt填充
  • 获取工具提示宽度
  • 定位#tooltip
  • 并展示它！

PS：我刚刚在你的 CSS: 中重命名#features_icons li span {为#tooltip{

于 2012-07-11T22:36:53.817 回答
0

这是我的看法http://jsfiddle.net/XrTZg/30/

我在img之前移动了跨度。我删除了不必要的边距（跨越内联 css + css 文件）。

I made the span display: absolute;, i wanted it to be positioned relative to the parent element, so i set #features_icons li to be display: relative;.

I also fixed the top and left offset of the span, in JS.

于 2012-07-11T22:42:43.457 回答