I'm currently attempting to implement a feature where a line of text is displayed beneath a row of buttons and the content of the text changes based on which button is hovered over. I've encountered some challenges while using the .hover() and .show() functions with my buttons and text elements. My goal is to ensure that the text appears in a line below the buttons only when they are being hovered over; otherwise, no text should be visible. Once a button is clicked, I want the associated text to remain on the page. In my implementation utilizing Bootstrap, I have initially hidden the different text variations using CSS display:none. When trying to hide them with jQuery within document.ready, I faced difficulties. It's possible that this issue may be related to how the text is structured in the HTML code? The JavaScript, HTML, CSS, and a link to the JSFiddle demo can be found below. Thank you for your help!
HTML
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
JavaScript
$('.btn-1').hover(function(){
$('.b-1-text').show();
});
$('.btn-2').hover(function(){
$('.b-2-text').show();
});
$('.btn-3').hover(function(){
$('.b-3-text').show();
});
$('.btn-4').hover(function(){
$('.b-4-text').show();
});
$('.btn-5').hover(function(){
$('.b-5-text').show();
});
CSS
.col-xs-5ths {
width: 20%;
float: left;
}
.b-1-text{
display: none;
}
.b-2-text{
display: none;
}
.b-3-text{
display: none;
}
.b-4-text{
display: none;
}
.b-5-text{
display: none;
}