在网页开发中，大家经常需要在div容器中放置各种内容，但是有时候大家需要让鼠标指针在这些内容之间移动时，呈现出一种阴影效果，这时大家可以通过使用CSS中的hover效果来实现。
下面大家将介绍如何使用CSS中的hover效果来创建鼠标经过div阴影效果。
1. 创建包含div元素的HTML结构
首先，大家需要创建一个包含div元素的HTML结构，如下所示：
其中，`id`为div元素的标识符，`myDiv`为div元素的名称。
2. 添加CSS样式
接下来，大家需要添加一些CSS样式来定义div元素的属性和样式，以便实现阴影效果。
#myDiv {
width: 300px;
height: 300px;
background-color: #f00;
position: relative;
#myDiv:hover {
background-color: #ddd;
transition: background-color 0.3s ease;
#myDiv:hover:before,
#myDiv:hover:after {
content: “”;
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 100px solid #f00;
transform: translateX(-50%);
上述代码中，`#myDiv:hover`表示当鼠标悬停于div元素上时，前景色变为白色，背景色变为黑色，同时前景色和背景色之间添加了一个渐变效果。`:before`和`:after`元素是作为背景色的补图，它们在div元素上的位置是固定的，并且当鼠标悬停于div元素上时，它们会消失，将透明。
3. 测试效果
完成样式设置后，大家可以直接在网页中测试效果，打开网页，将鼠标悬停在div元素上，观察阴影效果。
可以看到，当鼠标悬停于div元素上时，阴影效果更加明显，同时也更加美观。
通过以上步骤，大家就如何用CSS中的hover效果来创建鼠标经过div阴影效果有了简单的了解。
在实际开发中，大家可以根据不同的需求和情况，灵活地调整hover效果的细节，创造出更加完美的网页效果。