我想要有不同之处:将光标悬停在元素中,让我们说元素上的指针,n-resize为margin-top,s-resize为margin底部。我知道我可以在span元素之前和之后创建一个不同的div来拥有选择器。问题是,树HTML是从JS库(fancytree,树库)自动生成的,我担心如果我在span之前和之后手动插入另一个元素,功能就会中断。任何帮助表示赞赏。
以下是解释情况的图片。
这是其中一条评论建议的我的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库使用该边距来检测拖放位置。
答案 0 :(得分:2)
:before
和:after
伪元素position: relative
position: absolute
并使用top
/ right
/ bottom
和left
定位。
left
和right
会在父级的左右边缘之间拉伸元素。top
或bottom
值,以便将伪元素放置在其父元素的边距上。他们的身高也一样。注意:伪元素可能会干扰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;
答案 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;
}