Question

我在行类中有3个元素（p元素）（每个都有col-md-4）。现在我想在悬停时传递一个类（“井”），这样每当鼠标悬停时，每个元素都可以有一个单独的井类。我可以不用悬停就行，但悬停时，我正在挣扎。有人可以帮忙吗？

Answer 1

使用jquery在悬停时应用该类：

$('.myText').mouseenter(function(){
    $(this).addClass("well");
});

$('.myText').mouseleave(function(){
    $(this).removeClass("well");
});

Answer 2

您可以简单地使用jQuery的mouseenter和mouseleave函数：

$('p').mouseenter(function() {
  $(this).addClass("well");
});
$('p').mouseleave(function() {
  $(this).removeClass("well");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <p>Item</p>
    </div>
    <div class="col-md-4">
      <p>Item</p>
    </div>
    <div class="col-md-4">
      <p>Item</p>
    </div>
  </div>

</div>

当然，您应该根据需要更改选择器。

Answer 3

使用CSS

我建议你单独使用CSS。您只需要在用户将鼠标悬停在元素上时对well标记产生p效果。如果您提取引导well样式定义并在p:hover规则上使用它，则不要使用Jquery并添加删除类。

well的引导定义如下。

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

您所要做的就是在页面中添加此自定义CSS规则

.YourMainDivClass p:hover {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}

YourMainDivClass的想法是，p标记必须是div的一部分（正如您的问题所理解的那样），并且您不希望此效果在您网页中的所有p代码。因此，为了将效果限制为特定组，我在选择器中使用了父class。

希望这会有所帮助!!

使用bootstrap Well类进行悬停效果

3 个答案: