Question

经过一番浏览后，我找到了一个代码，它可以完成我想要的学位。我可以将鼠标悬停在某些文本上，并显示一个工具提示框，其中包含HTML，因此它可以包含图像，链接等。

我让它在jQuery中完美而轻松地工作。问题是，它是针对eBay描述而jQuery不会加载到网站上，因此它已被破坏。这意味着我必须在CSS中完成。

下面是我的代码 - 它可以解决当你将鼠标放在原位时出现框的问题，而不仅仅是当你希望它出现时鼠标悬停在文本上时 - 光标也停止变为帮助符号出于某种原因。

我已经构建了一个JSFiddle，因为它似乎对此有意义（虽然帮助游标在这里工作，所以在我的长代码中必须是其他东西）

.tiptext {
    width: auto;
    font-family: 'ProximaNova', Helvetica;
    font-weight: bold;
    text-decoration: underline;
    font-size: 14px;
    /*line-height: 175%;*/
    color: rgb(39, 44, 45);
    cursor: help !important;
    position: relative;
}

.description {
    border:1px solid #e3e3e3;
    background: white;
    width:auto;
    max-width:275px;
    height:auto;
    padding:10px;
    font-family: 'ProximaNova', Helvetica;
    font-weight: 200;
    color: rgb(39, 44, 45);
    font-size: 13px;
    top:29px;
    left: 120px;
    z-index:500;
    opacity:0;
    /*visibility:hidden;*/
    position:absolute;
    -webkit-transition: opacity 0.9s ease-out;
    -moz-transition: opacity 0.9s ease-out;
    -ms-transition: opacity 0.9s ease-out;
    -o-transition: opacity 0.9s ease-out;
    transition: visibility 0s 2s, opacity 2s linear;
}

.tiptext:hover .description { /* display tooltip on hover */
    opacity:1;
    -webkit-transition: opacity 0.1s ease-in;
    -moz-transition: opacity 0.1s ease-in;
    -ms-transition: opacity 0.1s ease-in;
    -o-transition: opacity 0.1s ease-in;
    transition: opacity 0.1s ease-in;
}

HTML

<div class="tiptext">Hover over me<div class="description" style="text-align:center;">and this box appears with full html support like links to  <a href="https://www.google.com" target="_blank">Google</a><br>the problem is, this box also appears when you mouse over where it would be.</div></div>

Answer 1

感谢输入@ 1l13v，但我编辑了一个使用可见性和其他一些黑客的建议，并得到了一些完美的工作，对于任何搜索也是100％eBay兼容。一个交互式CSS工具提示框，可以包含链接或图片，仅在鼠标悬停时显示。它有动画可以快速淡入淡出并逐渐消失，并且在我的情况下还有一个问号帮助框。

我最终得到了

.tiptext {cursor: help;font-family:'ProximaNova',Helvetica;font-weight: bold;text-decoration: underline;font-size: 14px;line-height: 172%;color:rgb(39, 44, 45);}

.description {border:1px solid #e3e3e3;background: white;width:auto;max-width:275px;height:auto;padding:10px;font-family: 'ProximaNova', Helvetica;font-weight: 300;color: rgb(39, 44, 45);font-size: 13px;z-index: 500;position: absolute;margin-left: 50px;margin-top: 20px;cursor: default;display: inline-block;}

.tiptext > .description {
visibility:hidden;
opacity:0;
transition:visibility 0s linear 0.4s,opacity 0.4s linear;
}

.tiptext:hover > .description {
visibility:visible;
opacity:1;
transition-delay:0.1s;
-webkit-transition: opacity 0.1s ease-in;
-moz-transition: opacity 0.1s ease-in;
-ms-transition: opacity 0.1s ease-in;
-o-transition: opacity 0.1s ease-in;
transition: opacity 0.1s ease-in;

小提琴...... http://jsfiddle.net/a64gpc40/

Answer 2

您应该将Hover over me放在单独的div中，如下所示：

<div class="target"> Hover over me </div>

当你只悬停.target课程时，然后显示工具提示，如下所示：

.target:hover + .description { /* display tooltip on hover */
    opacity:1;
    -webkit-transition: opacity 0.1s ease-in;
      -moz-transition: opacity 0.1s ease-in;
      -ms-transition: opacity 0.1s ease-in;
      -o-transition: opacity 0.1s ease-in;
      transition: opacity 0.1s ease-in;
}

试试这个fiddle

包含HTML的交互式CSS工具提示框

2 个答案: