首页 > 解决方案 > 如何用组类覆盖元素类

问题描述

我是网络新手,我正在 svg 画布中创建拖放功能,其中我有一组几个 svg 元素。拖动时,我想用组类覆盖元素类。但是元素类具有更高的优先级,并且组的类的应用不会改变子元素的分配属性。那么,如何用组类覆盖元素类呢?!important 在 .drag 没有帮助。

.gBox {
  fill:transparent;
  stroke-width:0.1
}
.gBox:hover{
     stroke:grey;
     stroke-dasharray:1,1
}
.rect{
    fill:transparent;
    stroke:black;
    stroke-width:0.5;
}
.hover:hover{
    stroke-dasharray:1,1
}
.drag{
    stroke:grey;
    stroke-dasharray:1,1    
}
<g id="myGroup1" class="drag" style="">
  <rect id="undefined" x="20" y="10" width="30" height="10" rx="0" ry="0" class="gBox"></rect>
  <rect id="myRect1" x="20" y="10" width="10" height="10" rx="1" ry="1" class="rect hover"></rect>
  <rect id="myRect2" x="40" y="10" width="10" height="10" rx="1" ry="1" class="rect hover"></rect>
</g>

标签: javascriptsvgcss-specificity

解决方案


推荐阅读