如何将引导发光（用于“ form-control” CSS类中）放在div上？

Question

我有一个网页，其中有多个页面，divs它们的工作原理类似于通知用户框。

我想要的就是用户将鼠标箭头放在通知框中（将鼠标悬停在div上）以显示其发光效果，div就像上面单击时输入的文本所提供的那样。当用户退出此区域时div，辉光必须消失。

我怎样才能做到这一点？

编辑：我的问题似乎与其他文章相同，但事实并非如此！我希望在div上添加与文本输入相同的效果（相同的颜色，相同的阴影效果）。

.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

只需添加悬停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>