Question

我知道这个问题曾多次被问到，但我找不到适合我案例的解决方案，所以让我们开始。

我使用code导航片来浏览内容。结构如下所示：

Bootstrap

这很简单，但我会解释更多。 <ul id="mytabs" class="nav nav-pills nav-justified" role="tablist"> <li class="option1"><a href="#option1" role="tab" data-toggle="tab"><img src="/image1" id="image1-background"</a></li> <li class="option2"><a href="#option2" role="tab" data-toggle="tab"><img src="/image2" id="image2-background"</a></li> </ul> <div class="tab-content"> <div class="tab-pane fade id="option1"> <p>Content for first option</p> </div> <div class="tab-pane fade id="option2"> <p>Content for second option</p> </div> </div>部分背后的主要思想是，它们的图像应该在悬停和鼠标悬停时发生变化。我是这样做的（从我尝试过的，我最接近的东西）：

.nav-pills

它按照我的意愿工作，即它以正确的方式改变图像。当我将鼠标移到$(".option1").hover(function() { $('#image1-background').attr('src', 'different-image1.png'); }, function() { $('#image1-background').attr('src', 'image1.png'); });部分时真的需要different-image1.png时，麻烦来了，但显然它不起作用，因为当我鼠标移动时，图像会发生变化，所以如何保留图像当我的光标位于相应的标签中时，我会继续（＆＃39; .tab-content > .tab-pane id="option1"＆＃39;在这种情况下）显示？

我试着这样做：

different-image1.png

但它没有提供其他脚本$('#mytabs a[href="#option1"]').on('shown.bs.tab', function (e) { $('#image1-background').attr('src', 'different-image1.png'); });提供的功能。这也是为了让你更好地掌握我所谈论的内容 - https://jsfiddle.net/adaccount/9rdum27v/

Answer 1

创建一个包装器div以包装选项卡和选项卡内容，仅为选项卡选项注册鼠标输入事件，并为包装器注册鼠标离开以重置为默认值。

我更新了你的例子：

https://jsfiddle.net/9rdum27v/1/

Jquery在hove上更改图像并在鼠标上设置默认值

1 个答案: