Question

我希望在悬停在其父元素上时为子元素规定行为，在将鼠标元素本身悬停时使用不同的行为。在我的示例中，属性是边框颜色。

如何在不使用!important的情况下完成此操作（请参阅下面的SCSS代码）？

<div class="filetile">
  <div class="filename">
    foo
  </div>
  <div class="fileTile-menu">
    <div class="gear-icon">
      <img src="https://sslbucket-a.akamaihd.net/gears.opswat.com/marketing-site/icon_menu.png"/>
    </div>
  </div>
</div>

SCSS：

.filetile {
  height: 30px;
  width: 110px;
  padding: 3px;
  border: 1px solid #333333;
  border-radius: 3px;
  display: inline-table;
  &:hover {
    background-color: #efeeb3;
    > .fileTile-menu {
      border: 1px solid #646464;
    }
  }
}

.filetile > div {
  display: inline-block;
  vertical-align: middle;
}

.fileTile-menu {
  float: right;
  padding: 3px;
  border: 1px solid transparent;
  &:hover {
    border: 1px solid #e5e5e5 !important;
  }
}

Codepen example

Answer 1

只需将.fileTile菜单规则放在.filetile的scss规则中：http://codepen.io/anon/pen/eNMreX

.filetile {
  height: 30px;
  width: 110px;
  padding: 3px;
  border: 1px solid #333333;
  border-radius: 3px;
  display: inline-table;
  &:hover {
    background-color: #efeeb3;
    > .fileTile-menu {
      border: 1px solid #646464;
    }
  }

 .fileTile-menu {
   float: right;
   padding: 3px;
   border: 1px solid transparent;
   &:hover {
     border: 1px solid #e5e5e5;
   }
 }
}

为什么这样工作？您的scss编译器将根据以下规则评估您的scss：

.filetile {...}
.filetile:hover {...}
.filetile:hover > fileTile-menu { border : 1px solid #646464;}
.filetile .fileTile-menu { border : 1px solid transparent;}
.filetile .fileTile-menu:hover { border: 1px solid #e5e5e5;}

通过这种改变，您将获得实现目标所需的特异性。要了解有关特异性的更多信息，请查看以下文章：CSS Specificity: Things You Should Know

当悬停在父元素

1 个答案: