侧边栏 jquery 和引导菜单中的奇怪悬停行为

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 得到他的width 在JS 中计算

.jspVerticalBar 在 CSS 中设置了 width 和 8px

最简单的解决方案是在 CSS 中将 2px 添加到 .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>

当我将 Tooltip 调用移到 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>

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

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

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