Question

我试图在一行按钮下显示一行文字。显示的文字取决于您悬停的按钮。我在使用.hover()和.show()时遇到了我的按钮和文字，我遇到了问题。我想拥有它所以文本位于按钮下方的一行上，如果您没有悬停在按钮上，则不会显示任何文本。单击该按钮后，与其关联的文本将保留在页面上。我正在使用Bootstrap，到目前为止，我已经使用CSS display:none隐藏了各种文本可能性的类。当我试图在document.ready下使用jQuery隐藏它们时，我似乎无法隐藏它们。也许这就是我在html代码中设置文本的方式？下面是JSFiddle的链接。提前谢谢！

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;
    }

https://jsfiddle.net/anbenya/h7fua94s/2/

Answer 1

你可以简化这一点，只需要一个$.hover()。更新了您的代码，以反映按钮上的data-id属性，该按钮将切换相应的文本框。

当您单击一个按钮时，您可以将.selected类切换到文本框，该按钮将始终显示该文本框，直到您再次单击该按钮。

＆＃13;

$(document).ready(function() {

  $('.btn').hover(function() {
    var id = $(this).attr('data-id');
    $('.b-' + id + '-text').show();
  }, function() {
    $('.b-text').hide();
  }).on('click',function() {
  	var id = $(this).attr('data-id');
  	$('.b-' + id + '-text').toggleClass('selected');
  });

});

＆＃13;

.col-xs-5ths {
  width: 20%;
  float: left;
}

.b-text {
  display: none;
}
.selected {
  display: block!important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" data-id="1"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
      </div>
      <div class="col-xs-5ths">
        <button type="button" class="btn btn-danger btn-circle btn-5" data-id="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>

＆＃13;

Answer 2

首先，最后缺少(，其次在JSFiddle中没有选择JQuery。

$(document).ready(function() {
$('.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();
  });
})

将鼠标悬停在按钮jQuery上时显示文本

2 个答案: