Question

我似乎找不到解决此问题的方法。我试图在折叠菜单时隐藏工具提示。谁能提出解决方案？

.item{
    overflow: hidden;
    border-radius: 50%;
    transition: 0.4s ease-out;
    width: 32px;
    height: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 3px grey;
}


a.tooltips {
    overflow: visible;
}
a.tooltips span {
    position: absolute;
    color: #fff;
    background: #000000;
    height: 20px;
    line-height: 10px;
    text-align: center;
    visibility: hidden;
    border-radius: 3px;
    padding: 4px;
    white-space:nowrap;
}
a:hover.tooltips span {
    visibility: visible;
    left: 100%;
    top: 50%;
    margin-top: -10px;
    margin-left: 20px;
}

<div class="main">
        <img src="A.png" alt="">
    </div>
    <div class="box">
        <a href="#;" class="item item1 tooltips"><img src="B.png" alt=""><span>Tweet US</span></a>
        <a href="#;" class="item item2 tooltips"><img src="C.png" alt=""><span>Like Us on FB</span></a>
        <a href="#;" class="item item3 tooltips"><img src="D.png" alt=""><span>Instagram</span></a>
</div>
    <script>
        document.querySelector('.fab').addEventListener('click',function(e){
            document.querySelector('.box').classList.toggle('box-active');
            document.querySelector('.fab').classList.toggle('fab-active');
        });
    </script>

我正在尝试使用此视频Floating Action Button using CSS，但是隐藏在项目中的溢出似乎与工具提示的溢出冲突。结果是折叠菜单时，溢出仍然可见。

有什么解决方法吗？

工具提示溢出与框溢出冲突

0 个答案: