代码之家 › 专栏 › 技术社区 › Sunil Garg

如何在树节点CSS上显示全宽背景色

css html javascript

Sunil Garg · 技术社区 · 6 年前

我创造了一棵树 background-color 树节点悬停时更改。我想展示一下 背景色 全宽,就像 this example (单击任意节点时,它显示为灰色)。

但我要应用的元素 背景色 不是全宽本身。我怎样才能做到这一点?

.qwc-tree__branch {
  padding-left: 40px !important;
  font-size: 12px;
}

.tree__root {
  padding-left: 0 !important;
}

.tree__node {
  list-style-type: none;
  margin: 0;
  padding-left: 5px;
  position: relative
}

.tree__node::before,
.tree__node::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto
}

.tree__node::before {
  border-left: 1px dotted #e0e0e0;
  bottom: 50px;
  height: 100%;
  top: 0;
  width: 1px
}

.tree__node::after {
  border-top: 1px dotted #e0e0e0;
  height: 20px;
  top: 15px;
  width: 25px
}

.tree__root>.tree__root-node::before {
  border: 0;
}

.tree__root>.tree__root-node::after {
  border: 0;
}

.tree__node-header:hover {
  background-color: lightblue;
}

.tree__node-name {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  text-decoration: none
}

.tree__node-name--icon {
  margin: 0 5px 0 3px;
  color: $primary;
}

.tree__node-action {
  cursor: pointer;
  float: right;
  margin-right: 15px
}

tree .tree__node:last-child::before {
  height: 30px
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
  <li class="tree__node tree__root-node">
    <div class="tree__node-header">
      <span class="tree__node-name">
				<i class="material-icons tree__node-name--icon">assignment</i> India
			
			</span>
      <i class="material-icons tree__node-action">minimize</i>
    </div>
    <ul class="tree__branch">
      <li class="tree__node">
        <div class="tree__node-header">
          <span class="tree__node-name">
						<i class="material-icons tree__node-name--icon">assignment</i> Punjab
					
					</span>
        </div>
      </li>
      <li class="tree__node">
        <div class="tree__node-header">
          <span class="tree__node-name">
						<i class="material-icons tree__node-name--icon">assignment</i> Haryana
    				
					</span>
        </div>
      </li>
    </ul>
  </li>
</ul>

1 回复 | 直到 6 年前

Temani Afif 6 年前

可以使用伪元素模拟背景并使其溢出:

.tree__node-header:after {
  content:"";
  position:absolute;
  top:0;
  left:-40px; /*adjust this*/
  right:0;
  bottom:0;
  z-index:-1;
}

完整代码:

.qwc-tree__branch {
  padding-left: 40px !important;
  font-size: 12px;
  
}

.tree__root {
  padding-left: 0 !important;
  }
  /*added this*/
.tree__root>.tree__root-node>.tree__node-header {
  overflow:hidden;
}
 /**/
.tree__node {
  list-style-type: none;
  margin: 0;
  padding-left: 5px;
  position: relative
}

.tree__node::before,
.tree__node::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto
}

.tree__node::before {
  border-left: 1px dotted #e0e0e0;
  bottom: 50px;
  height: 100%;
  top: 0;
  width: 1px
}

.tree__node::after {
  border-top: 1px dotted #e0e0e0;
  height: 20px;
  top: 15px;
  width: 25px
}

.tree__root>.tree__root-node::before {
  border: 0;
}

.tree__root>.tree__root-node::after {
  border: 0;
}

.tree__node-header:hover,
.tree__node-header:hover:after { /*Added this*/
  background-color: lightblue;
}
/*Added this*/
.tree__node-header {
  position:relative;
}

.tree__node-header:after {
  content:"";
  position:absolute;
  top:0;
  left:-45px;
  right:0;
  bottom:0;
  z-index:-1;
}
/* */
.tree__node-name {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  text-decoration: none
}

.tree__node-name--icon {
  margin: 0 5px 0 3px;
  color: $primary;
}

.tree__node-action {
  cursor: pointer;
  float: right;
  margin-right: 15px
}

tree .tree__node:last-child::before {
  height: 30px
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<ul class="tree__branch tree__root">
  <li class="tree__node tree__root-node">
    <div class="tree__node-header">
      <span class="tree__node-name">
				<i class="material-icons tree__node-name--icon">assignment</i> India
			
			</span>
      <i class="material-icons tree__node-action">minimize</i>
    </div>
    <ul class="tree__branch">
      <li class="tree__node">
        <div class="tree__node-header">
          <span class="tree__node-name">
						<i class="material-icons tree__node-name--icon">assignment</i> Punjab
					
					</span>
        </div>
      </li>
      <li class="tree__node">
        <div class="tree__node-header">
          <span class="tree__node-name">
						<i class="material-icons tree__node-name--icon">assignment</i> Haryana
    				
					</span>
        </div>
      </li>
    </ul>
  </li>
</ul>