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 的优先级高于 class 添加的 css。您可以用 !important.

覆盖 css

.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">
</div

请注意，另一个更清晰的修复方法是将内联 css 移动到 class。

Answer 2

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

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

.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">

Answer 3

在 css 中进行样式设置，而不是内联。

.col-md-6.active{
  border: 0.5px solid;
  box-shadow: 5px  5px #99ccff;
  border-radius: 5px; 
  width: 500px; 
  height:700px;
  margin-right:1px;
  float:left
}
.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
  }

<div class="col-md-6 active"></div>

Answer 4

您只需要像这样将内联样式放入 css 文件中。

.col-md-6.active {
  border: 0.5px solid  ;
  box-shadow: 5px  5px #99ccff;  
  border-radius: 5px; 
  width: 500px; 
  height:700px;
  margin-right:1px;
  float:left
}
.col-md-6.active:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

<div class="col-md-6 active"></div>

Html 元素有双框阴影效果吗？

Html element have double box-shadow effect?

css

hover

box-shadow