Html 使用bootstrapwell类实现悬停效果

我在row类中有3个元素（

p

elements）（每个元素都有

col-md-4

）。现在我想在鼠标悬停时传递一个类（“well”），这样每当鼠标悬停时，每个元素都可以有一个单独的well类。没有悬停我也能做到，但有了悬停，我在挣扎。有人能帮忙吗？

使用jquery在悬停时应用类：

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

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

---

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

$（'p'）.mouseenter（函数（）{
$（此）.addClass（“井”）；
});
$（'p'）.mouseleave（函数（）{
$（this.removeClass（“well”）；
});

项目

项目

项目

使用CSS

我建议您单独在CSS中执行此操作。当用户将鼠标悬停在元素上时，您只想在
p
标记上产生
效果。与其使用Jquery并添加或删除类，不如将引导
well
样式定义拉出来，并在
p:hover
规则上使用它

井的引导定义如下所示

.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

希望这有帮助
 你试过什么？请阅读如何正确询问有关stackoverflow的问题。您需要分享您的尝试，以便我们可以看到您可能出了什么问题。答案与现有答案重复，我知道，抱歉。。。我需要更多的时间来编写代码，这样Brad会更快。我把我的答案贴了出来。。。。布拉德得到了我的支持票！同样的事情也发生在我身上。）@andreas它消除了
jquery
执行。它在线程上运行。此外，预期的行为更多的是UI。我个人更倾向于尽可能避免使用脚本，因为这些工作都可以通过CSS单独完成。另外，这个问题没有用Jquery标记（但我知道OP正在使用它）@rajshekarredy非常感谢。“这真是一个很好的解决方案。”NikhilSharma很高兴我能帮上忙。。如果这对你有效，那么你可以接受答案，因为它对未来的人群有用。