How to put bootstrap glow (used in the 'form-control' CSS class) on a div?

Question

I have a web page that has multiple divs which works like informing boxes for the user.

All I want is when the user puts its mouse arrow inside an informing-box (hovers its mouse over the div) to display the glow on this div like the above input text provides when you clicking on it. When the user exits the region of this div , the glow must be disappear.

How can I do that?

EDIT: My question seems to be the same with the other article's, but it's NOT! I want the same effect of the text input to be added on the div (same color, same shadow effect).

 .pbox { border: 1px solid; width: 150px; height: 100px; display: table-cell; text-align: center; vertical-align: middle; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <br> <input type="text" name="txt" class="form-control" style="width: 150px;"> <br> <div class="pbox"> <b>Notice:</b> <br> You can't delete items without being logged-in. </div> 

Answer 1

Just need to add hover CSS, try the following

 .pbox { border: 1px solid; width: 150px; height: 100px; display: table-cell; text-align: center; vertical-align: middle; } .pbox:hover { border-color: rgba(82,168,236,.8); box-shadow: 0 0px 0px rgba(82,168,236,.8) inset, 0 0 8px rgba(82,168,236,.8); outline: 0 none; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> <br> <input type="text" name="txt" class="form-control" style="width: 150px;"> <br> <div class="pbox"> <b>Notice:</b> <br> You can't delete items without being logged-in. </div> 

Answer 2

You can change box-shadow and border on :hover

 .pbox { border: 1px solid; width: 150px; height: 100px; display: table-cell; text-align: center; vertical-align: middle; transition: all 0.3s ease-in; } .pbox:hover { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6); border-color: #66afe9; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <input type="text" name="txt" class="form-control" style="width: 150px;"> <div class="pbox"> <b>Notice:</b> <br>You can't delete items without being logged-in. </div>