css - html元素有双框阴影效果吗？

Question

我有这样的样式:

.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

<div class="col-md-6 active" style="border: 0.5px solid; box-shadow: 5px  5px #99ccff;  border-radius: 5px; width: 500px; height:700px;margin-right:1px;float:left"></div>

但是这个悬停效果没有任何效果，不会显示。我该如何解决？谢谢你的问候。

Answer 1

由于 css specificity，您没有看到悬停效果您的内联框阴影优先于 css :hover 规则...

要修复它，请使用 !important 或从您的内联样式中删除这些 Angular 色

.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2) !important; 
}

<div class="col-md-6 active" style="border: 0.5px solid; box-shadow: 5px  5px #99ccff;  border-radius: 5px; width: 500px; height:700px;margin-right:1px;float:left">