css加入hover代码，不能达到悬停效果，但使用强制元素状态:hover却能达到目的效果

问题概述

使用less调用混合时，给div添加:hover，但我在浏览器页面中发现没有达到预期目的：鼠标在div上悬停时，给边框添加阴影效果。

以下是less代码：

.hoverShadow{
    box-shadow:0 0 3px 0px #d5d2d2;
}

.divStyle{
    width:370px;
    height:200px;
    margin:14px 12px;
    border:1px solid #e6e2e2;
    float:left;
    border-radius:4px;
}

            div{
                .divStyle;
                &:hover{
                    .hoverShadow;
                }

问题出现的现象：

我发现尽管鼠标悬停没有触发效果，但是在css源码中，样式的确加进去了，如下：

#job .container #jobsPlate div {
  width: 370px;
  height: 200px;
  margin: 14px 12px;
  border: 1px solid #e6e2e2;
  float: left;
  border-radius: 4px;
}
#job .container #jobsPlate div:hover {
  box-shadow: 0 0 3px 0px #d5d2d2;
}

使用浏览器的开发人员工具，<元素>中的强制元素状态:hover，此时发现div触发了设置的hover效果：显示阴影。

既然这样，可以判定代码是有效的，那为什么在正常使用浏览器页面时不能触发呢？
我尝试过给.hoverShadow混合加入!important，依然没有效果，请教这是哪里出现的原因。

解决了吗