侧栏jquery和bootstrap菜单中的奇怪悬停行为

Question

我正在做一个基于Boostrap 3模板的大项目，该模板使用大量的jQuery插件来满足项目需求。一切进展顺利！

您可以在此处看到3个项目示例页面：

www.frontsite.com.br/saam2/index.php?_action=mapa

www.frontsite.com.br/saam2/index.php?_action=painel

www.frontsite.com.br/saam2/index.php?_action=arquivo

两个页面都有一个“左侧内容菜单/栏”。它是一个可滚动的包含div，带有可嵌套项目ul和li的可折叠列表，如您所见。

<div class="sidebar-operacional">
...
   <div class="col-md-12 nav-hierarq" id="barra-lateral-operacional">

我列表中的每个嵌套项都会显示一个简短的蓝色，红色和灰色span按钮列表，每个按钮都有自己的功能/动作。做得好！

问题是 - 非常奇怪： 在谷歌浏览器上（我没有在其他人身上测试过），当我的列表中的项目被展开/打开时（它显示右侧的减号按钮），当我将鼠标悬停在这些小跨度按钮上时，其边距变为零，将它们向左侧进行意外的小动作，将它们堆叠起来。当我的列表中的项目被折叠/关闭时（它显示右侧的加号按钮），当我将鼠标悬停在这些相同的跨度按钮上时，其边距将返回到其原始位置和正确位置。它仅在具有子项的li项目中发生。当您将鼠标悬停时，最深的li项不具有相同的行为：这应该是所有人的正确行为！

奇怪，没有？

我已经花了很多时间调查可能发生的事情，解决问题。如果有人能帮助我，我会很高兴。

非常感谢。

在1月21日添加：

我认为这张图片可以说明发生的事情/发生的地方。 使用小SPAN按钮出现问题：INFO，MAPA，ARQ，COMM。 您是否尝试通过鼠标悬停它并看到它们自动接近旁边最近的SPAN按钮？ 我认为它无法找到或找到一些意想不到的CSS类覆盖问题！有人可以帮忙吗？

Answer 1

我是疯了还是你在谈论将这些按钮推到左边的scroll bar？

从我在这里看到的。滚动条.jspPane获取他在JS中计算的width

.jspVerticalBar在CSS中设置了width 8px

最简单的解决方案是将2px添加到CSS中的.jspVerticalBar ..或者您可以查看为什么.jspPane的宽度未正确计算

Answer 2

经过深入调查后，我发现问题出现在哪里，但我真的还不知道原因。

顺便说一句，我发布我的解决方案以防其他人遇到这样的问题。

我在span标记中调用了Boostrap工具提示，如下所示：

<span class="label" data-rel="tooltip" data-placement="right" title="Gerenciar Item">
   <a class="btn" href="index.html">Ger</a>
</span>

当我将工具提示调用移到a标记内时，奇怪的错误停止了。

<span class="label">
   <a class="btn" href="index.html" data-rel="tooltip" data-placement="right" title="Gerenciar Item">Ger</a>
</span>

但这个解决方案并没有让我满意！我真的很想知道span标签内部工具提示调用的原因是错误地加载了。

所以看Bootstrap documentation，我发现了一种使用参数container调用工具提示的方法，所以我想。

我将我的按钮重写为这样的东西（使用参数data-container="body"）：

<span class="label" data-rel="tooltip" data-container="body" data-placement="right" title="Gerenciar Item">
   <a class="btn" href="index.html">Ger</a>
</span>

我真的不知道为什么，但这是我遇到的问题，做这个小修改我避免问题让我发疯。

感谢我得到的每一个帮助:)

所以我希望也能帮助发布这个。