0

我有一个图标，当您将鼠标悬停在它上面时，我希望在图标右侧出现一个自定义 CSS 工具提示。无论您是向上还是向下滚动页面，工具提示都需要出现在图标的右侧。

不，我不想使用任何插件。我只想要一点 JS/CSS 来完成工作。如果使用JQuery，需要兼容v1.7，JQuery-UI：v1.8。

此外，它需要与 IE 6 和 7 兼容。

我更愿意将我的元素保留为兄弟元素，但看起来在某些情况下出现的 div 需要是子元素，所以如果需要更改 HTML 也没关系。

HTML：

<img src="" class="icon">ICON<img/>

<div class="demo">
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
    STUFF<br/>
</div>

CSS：

.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
}

.demo:after, .demo:before {
    border: solid transparent;
    content: ' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}

.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}

.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}

现场示例：http: //jsfiddle.net/49Js3/16/

4

2 回答 2

2

由于我的声誉不足以评论上面的答案，我只想添加一个更新的小提琴（基于上面的答案），绝对定位工具提示，但使用 display: inline-block 以便它不固定到从左侧开始的某个位置并将显示在右侧：这是重要的一点：

a.tippy:hover + div {
    display: inline-block;
    position: absolute;
}

http://jsfiddle.net/7gmv3wo2/

于 2020-11-04T12:25:41.147 回答
1

在这里小提琴：http: //jsfiddle.net/49Js3/29/

我无法访问IE6，所以我不知道它是否合法。我知道你需要一个锚来获得 IE7 和更早版本中的 CSS 的悬停行为。

因此，我在您的图像周围添加了一个锚点，以及一个包含工具提示的 div。

HTML

<div class="outer">
<a class="tippy" href="">
        <img src="" class="icon">ICON<img/>
   </a>

    <div class="demo">STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>STUFF
        <br/>
    </div>
</div>

这是CSS：

.tippy {
    text-decoration: none;
}
.outer {
    width: 350px;
}
a.tippy:hover + div {
    display:block;
    float: right;
}
.demo {
    margin-left: 5px;
    padding: 10px;
    width: 265px;
    height: 110px;
    background-color: #ccc;
    position: relative;
    border: 2px solid #333;
    display: none;
}
.demo:after, .demo:before {
    border: solid transparent;
    content:' ';
    height: 0;
    right: 100%;
    position: absolute;
    width: 0;
}
.demo:after {
    border-width: 11px;
    border-right-color: #ccc;
    top: 13px;
}
.demo:before {
    border-width: 14px;
    border-right-color: #333;
    top: 10px;
}
于 2013-09-24T20:19:35.357 回答