Question

我有这种造型：

＆＃13;

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

＆＃13;

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

＆＃13;

但这种悬停效果没有任何影响，它不会显示。我怎么解决这个问题？谢谢。

Answer 1

内联css的优先级高于您的类添加的css。您可以使用!important覆盖css。

＆＃13;

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

＆＃13;

<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

＆＃13;

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

Answer 2

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

修复它使用！重要或从内联样式中删除这些角色

.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元素有双盒阴影效果吗？

4 个答案: