Question

当你试图将鼠标悬停在滚动的箭头上时，这个sniped中的工具提示会关闭。使用鼠标滚动它工作正常，但我需要它与鼠标悬停工作。有什么建议吗？

提前谢谢

.wrapper{
    position:relative;
}
.tooltip {
    transform: none;
    margin: 50px;    
}

.tooltip:hover > .tooltip-text, .tooltip:hover > .wrapper {
    pointer-events: auto;
    opacity: 1.0;
}

.tooltip > .tooltip-text, .tooltip >.wrapper {
    display: block;
    position: absolute;
    z-index: 6000;
    overflow: visible;
    padding: 5px 8px;
    margin-top: 10px;
    line-height: 16px;
    border-radius: 4px;
    text-align: left;
    color: #fff;
    background: #000;
    pointer-events: none;
    opacity: 0.0;
    -o-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* Arrow */
.tooltip > .tooltip-text:before, .tooltip > .wrapper:before  {
    display: inline;
    top: -5px;
    content: "";
    position: absolute;
    border: solid;
    border-color: rgba(0, 0, 0, 1) transparent;
    border-width: 0 .5em .5em .5em;
    z-index: 6000;
    left: 20px;
}

/* Invisible area so you can hover over tooltip */
.tooltip > .tooltip-text:after, .tooltip > .wrapper:after  {
    top: -20px;
    content: " ";
    display: block;
    height: 20px;
    position: absolute;
    width: 60px;
    left: 20px;
}

.wrapper > .tooltip-text {
    overflow-y: auto;
    max-height: 100px;
    display: block;
}

<div class="tooltip tooltip-scroll">Hover over me for scrollbar
    <div class="wrapper"> 
    <span class="tooltip-text">Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>Hello there<br/>abc<br/>def<br/><br/>def<br/><br/>def<br/><br/>def<br/>ghi<br/>jkl<br/></span>
    </div>
</div>

Answer 1

基于我的尝试错误研究，我得到了一个基于应用样式的webkit解决方案，“强制”浏览器将滚动条作为另一个页面元素处理：

.tooltip.tooltip-scroll ::-webkit-scrollbar {
    background-color: #F1F1F1;
}

.tooltip.tooltip-scroll ::-webkit-scrollbar-thumb {
    background-color: #C1C1C1;
    border: 1px solid #F1F1F1;
}

/* optional */
.tooltip.tooltip-scroll ::-webkit-scrollbar-button {
    background-color: #F1F1F1;
}

（有关如何设置滚动条@CSS-Tricks的样式的更多示例。）

另外，这里有额外的帮助。为此更改样式 .tooltip ：

.tooltip {
    transform: none;
    padding: 10px;
}

填充允许触发工具提示的元素在将鼠标指针从元素移动到工具提示时不会丢失：悬停状态。由于填充区域仍被视为元素的一部分。

Stack Overflow社区的注意事项：请随时提供有关其工作原理的额外信息。

带滚动的工具提示。当鼠标悬停在箭头上时，滚动正在消失。

1 个答案: