Question

我在Web开发中还很陌生，我想对左按钮产生影响，即当您将鼠标悬停在其上时，会出现一个较小的箭头，整个按钮会扩展到屏幕的左侧，但是对于某些情况为什么它看起来不像我想要的那么光滑，我找不到找到这种方法的方法，有人可以帮我吗？ :) PS：Rmain是按钮上始终显示的箭头，Rside是将鼠标悬停在按钮上时出现的箭头。

html：

<button class="right">
        <span class="Rmain"></span>
        <span class="Rside"></span>
    </button>

css：

.left {
    background-color: rgba(255, 255, 255, 0.863);
    border: 4px solid rgb(60, 57, 238);
    color: rgb(0, 0, 0);
    padding: 145px 10px;
    margin: 50px;
    width: 55px;
    text-align: right;
    border-radius: 10%;
    position: absolute;
    transition: 0.6s;
}

.left:hover {
    box-shadow: 5px 12px 16px 0 rgba(0, 0, 0, 0.4);
    background-color: rgb(60, 57, 238);
    color: rgb(255, 255, 255);
    opacity: 75%;
    cursor: pointer;
    border-left-width: 95px;
    transition: 0.6s;
}

.Lmain {
    position: absolute;
    height: 0px;
    width: 0px;
    top: 40%;
    right: 86%;
    font-size: 40px;
}

.Lmain::after {
    content: '\290C';
}

.Lside {
    position: absolute;
    color: white;
    height: 0px;
    opacity: 0;
    top: 40%;
    right: 58%;
    font-size: 39px;
    transition: 0.4s;
}

.Lside::after {
    content: '\2039';
}

.left:hover .Lside {
    right: 72%;
    transition: 1s;
    opacity: 1;
}

button:focus {
    outline: 0;
}

Answer 1

我不确定这是否是您要寻找的东西，但是这样看起来更好：

将border-right-width:20px;添加到CSS的.left：hover部分中

需要帮助以使按钮的左侧向左流动

1 个答案: