Using bootstrap Well class for hover effect - html

Question

I have 3 elements(p elements) inside a row class ( with col-md-4 each). Now I want to pass a class ( "well" ) on hover, so that whenever mouse hovers they each element can have an individual well class. I can do it without hover but with hover, I am struggling. Can anybody help?

Answer 1

use jquery to apply the class on hover:
$('.myText').mouseenter(function(){
$(this).addClass("well");
});
$('.myText').mouseleave(function(){
$(this).removeClass("well");
});

Answer 2

Use CSS
I would recommend you to do this in CSS alone. All you want is to have the well effect on your p tag when user hovers the mouse on the element. Instead of using Jquery and adding removing the classes its better if you pull out the bootstrap well style definition and use it on your p:hover rule.
The bootstrap definition of well is as below.
.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);
}
All you have to do is to add this custom CSS rule in your page
.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);
}
Here the idea with YourMainDivClass is that your p tag must be a part of div (as understood by your question), And you don't want this effect to work on all the p tags in your page. So to restrict the effect to specific group I have used the parent class in the selector.
Hope this helps!!

Answer 3

You can simply use jQuery's mouseenter and mouseleave functions:
$('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>
Of course you should change the selectors for your needs.