Menu
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>
202
How To Create a CSS Glow Effect. The CSS glowing text can be created by using the text-shadow property. This property allows you to add different shadows to your text. You can also place your text in an element and then apply the shadow effect to it by using the box-shadow property with some animations.
Form controls automatically receive some global styling with Bootstrap: All textual <input> , <textarea> , and <select> elements with class . form-control have a width of 100%.
You can add a second class by simply adding it in the class attribute, the classes will have to be separated by a space. Hope this helps!
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
