Geek Answers Handbook

How to set bootstrap glow (used in CSS class "form-control") on div?

I have a multi-page webpage divsthat works as info fields for the user.

All I want is when the user places his mouse cursor in the information box (hover over the div) to display a glow on it div, like the input text above, when you click on it. When the user leaves the area of ​​this div, the glow should disappear.

How can i do this?

EDIT: My question seems to be the same as in other articles, but it is NOT! I want the same text input effect to be added to 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>
Run code
+4
2

hover CSS,

.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>
+4

box-shadow border :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>
+1

More articles:


All Articles