Despite the numerous times this question has been asked, I am struggling to find a solution that fits my specific case. Let's dive into it.
My navigation setup involves using Bootstrap nav pills to navigate through content. The structure looks like this:
<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>
Although seemingly simple, let me explain further. The key concept behind the .nav-pills section is that they contain images that should change on hover and mouse over events.
I accomplish this with the following script (which gets me close to what I need):
$(".option1").hover(function() {
$('#image1-background').attr('src', 'different-image1.png');
}, function() {
$('#image1-background').attr('src', 'image1.png');
});
While this works as intended by changing the images correctly, the issue arises when I want the different-image1.png to remain displayed when hovering over the
.tab-content > .tab-pane id="option1"different-image1.png' in this scenario) displayed when my cursor is in the corresponding tab?
I attempted the following solution:
$('#mytabs a[href="#option1"]').on('shown.bs.tab', function (e) {
$('#image1-background').attr('src', 'different-image1.png');
});
However, this approach didn't yield the desired results unlike other scripts provided by Bootstrap. For a clearer understanding of the issue, here is a jsfiddle link - https://jsfiddle.net/adaccount/9rdum27v/