Question

简单的html示例：

 <div class="parent">
    <div class="left"></div>
    <div class="right"></div>
 </div>

它的css：

@left: 10%;
@right: 100% - @left;

div.parent {
    div {
        float: left;
        height: 20px;
    }
    div.left {
        background-color: red;
        width: @left;
    }
    div.right {
        background-color: blue;
        width: @right;
    }
}

现在左侧宽度为10％，右侧宽度为90％。

Demo

现在的问题是：我需要在css：hover事件的左侧获得宽度：30％，相应的右侧：宽度：70％。

如果我将我的css改为下一个，我成功地让左侧动态。

.setLeftSide(){
    width: @left;
}

div.parent {
    div {
        float: left;
        height: 20px;
    }
    div.left {
        background-color: red;
        @left: 30%;
        .setLeftSide();

        &:hover {
            @left: 50%;
            .setLeftSide();
        }
    }
    div.right {
        background-color: blue;
        /*width: @right;*/
    }
}

Demo

但我不明白，我如何让右侧依赖左侧的宽度...

注意：这只是我在代码中实际拥有的一个简单示例（不是我的代码，而是我必须支持的代码）。最初，左右元素并不是一个接一个，所以CSS运算符，如+或〜不会帮助我。我需要依赖LESS，因为它已经实现，我无法改变代码的结构。

Thanx寻求帮助！

Answer 1

您可以使用+ css选择器（info @ MDN）来选择元素的下一个兄弟。

div.left:hover + div.right {
    width:70%;
}

当.right悬停时，您可以更改.left div的宽度。

<强> DEMO

CSS：

.parent div{
    float: left;
    height: 20px;
}
div.left {
    background: red;
    width: 10%;
}
div.right {
    background: blue;
    width: 90%;
}
div.left:hover {
    width:30%;
}
div.left:hover + div.right {
    width:70%;
}

Less - 元素的动态宽度：悬停和依赖于它的另一个元素

1 个答案: