我有一个带有6个缩略图的旋转木马。悬停在缩略图上时会有边框，但选中后，边框会消失。我尝试过各种各样的active / hover / etc变种，似乎无法让边界保持不变。也许我可以调整jQuery？我在下面粘贴了一些代码，谢谢！
<script>
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 15000
});
$('#carousel-text').html($('#slide-content-0').html());
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click( function(){
var id = this.id.substr(this.id.lastIndexOf("-") + 1);
var id = parseInt(id);
$('#myCarousel').carousel(id);
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
</script>
这是旋转木马的HTML：
<div class="container">
<h2 id="smallH2HR" style="color: #0e4164; margin-bottom: 30px;">Examples of findings</h2>
<div id="main_area">
<!-- Slider -->
<div class="row">
<div class="col-md-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-8" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="img/Graph_Example.png"></div>
<div class="item" data-slide-number="1">
<img src="img/Graph_Example.png"></div>
<div class="item" data-slide-number="2">
<img src="img/Graph_Example.png"></div>
<div class="item" data-slide-number="3">
<img src="img/Graph_Example.png"></div>
<div class="item" data-slide-number="4">
<img src="img/Graph_Example.png"></div>
<div class="item" data-slide-number="5">
<img src="img/Graph_Example.png"></div>
</div><!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" style="color: #2072b5;"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" style="color: #2072b5;"></span>
</a>
</div>
</div>
<div class="col-sm-4" id="carousel-text" style="background-color: #FCFCFC; border: 1px solid #F1F1F1; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow:inset 0px 10px 0px 0px #eeaa30; -moz-box-shadow:inset 0px 10px 0px 0px #eeaa30; box-shadow:inset 0px 7px 0px 0px #eeaa30, 0 1px 1px rgba(0,0,0,.1);"></div>
<div id="slide-content" style="display: none;">
<div id="slide-content-0">
<h2 style="margin-top: 20px;">Example One</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
<div id="slide-content-1">
<h2 style="margin-top: 20px;">Example Two</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
<div id="slide-content-2">
<h2 style="margin-top: 20px;">Example Three</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
<div id="slide-content-3">
<h2 style="margin-top: 20px;">Example Four</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
<div id="slide-content-4">
<h2 style="margin-top: 20px;">Example Five</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
<div id="slide-content-5">
<h2 style="margin-top: 20px;">Example Six</h2>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Ut vulputate eros sed felis sodales nec vulputate justo hendrerit. Quisque nec mauris sit amet elit iaculis pretium sit.</p>
<p>Quisque nec mauris sit amet elit iaculis pretium sit amet quis magna. Aenean velit odio, elementum in tempus ut, vehicula eu diam. Pellentesque rhoncus aliquam mattis. Aenean velit odio, elementum in tempus ut, vehicula eu diam.</p>
</div>
</div>
</div>
</div>
</div><!--/Slider-->
<div class="row hidden-xs" id="slider-thumbs">
<!-- Bottom switcher of slider -->
<ul class="hide-bullets">
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-0"><img src="img/Graph_Example_Thumb.png"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-1"><img src="img/Graph_Example_Thumb.png"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-2"><img src="img/Graph_Example_Thumb.png"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-3"><img src="img/Graph_Example_Thumb.png"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-4"><img src="img/Graph_Example_Thumb.png"></a>
</li>
<li class="col-sm-2">
<a class="thumbnail" id="carousel-selector-5"><img src="img/Graph_Example_Thumb.png"></a>
<div style="margin-top: -20px;">Opiods</div>
</li>
</ul>
</div>
</div>