元素的margin-top和margin-bottom的选择器

时间:2016-09-08 00:49:58

标签: css less

我想要有不同之处:将光标悬停在元素中,让我们说元素上的指针,n-resize为margin-top,s-resize为margin底部。我知道我可以在span元素之前和之后创建一个不同的div来拥有选择器。问题是,树HTML是从JS库(fancytree,树库)自动生成的,我担心如果我在span之前和之后手动插入另一个元素,功能就会中断。任何帮助表示赞赏。

以下是解释情况的图片。

enter image description here

这是其中一条评论建议的我的LESS代码,它不起作用。

span.fancytree-node {
    /* See #117 */
    display: inherit; // #117, resolves to 'display: list-item;' for standard trees
    width: 100%;
    margin-top: @fancy-node-v-spacing;
    margin-bottom: @fancy-node-v-bottom-spacing;
    min-height: @fancy-line-height;
    cursor: pointer;
    :before {
        cursor: n-resize;
    }
    :after {
        cursor: s-resize;
    }
}

为了更清楚,我需要边距,我不能在元素的上方和下方添加另一个元素,因为我的JS库使用该边距来检测拖放位置。

2 个答案:

答案 0 :(得分:2)

  • 制作:before:after伪元素position: relative
  • 的父代
  • 制作两个伪元素position: absolute并使用top / right / bottomleft定位。
    • 同时使用leftright会在父级的左右边缘之间拉伸元素。
  • 使用等于边距值的负topbottom值,以便将伪元素放置在其父元素的边距上。他们的身高也一样。

实施例

  

注意:伪元素可能会干扰JS的拖放。我们无法用可以从问题中重新创建的内容进行测试。可能有一个更好的解决方案,包括用JS更改指针。



div {
  margin-top: 10px;
  margin-bottom: 10px;
  min-height: 20px;
  cursor: pointer;
  position: relative;
  background: pink;
}
div:before,
div:after {
  cursor: n-resize;
  content: '';/*Needed to show the pseudo-elements*/
  position: absolute;
  top: -10px;/*Same as margin*/
  left: 0;
  right: 0;
  height: 10px;/*Same as margin*/
}
div:after {
  cursor: s-resize;
  top: initial;
  bottom: -10px;/*Same as margin*/
}

<div>Item</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

诀窍是将:before伪元素相对于其父容器定位。像这样:

div.box {
    position: relative;
    display: block;
    margin-top: 50px;

}
div.box:before {
    content:"";
    position: absolute;
    top: -50px; //LOOK HERE
    left: 0;
    width: 100%;
    height: 50px;
    cursor: n-resize;
    background:red;
}