我正在做CSS淡入淡出动画，当用户将鼠标悬停在按钮上时，按钮左侧的一些文本会淡入淡出。当文本在按钮右侧时，淡入效果会很好，但当文本在按钮左侧时，淡入效果就不好了。这是我为隐藏文本和按钮编写的html代码：

<div class="d-flex flex-row align-items-start" style="width: 20vh">
    <div class="hide">
        <div>
            <h2><b>Go to Other Page</b></h2>
        </div>
    </div>

    <div class="fadebutton">
        <a href="{% url 'login' %}">
            <button class="nextbutton">
                <img src="{% static 'images\leftarrow.svg' %}" alt="leftarrow"/>
            </button>
        </a>
    </div>

</div>

这是我的CSS代码：

.hide {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s 0.5s, opacity 0.5s linear;
}

.fadebutton:hover + .hide {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s linear;
}

请注意，淡入效果在“fadebutton”div写在“hide”div之前时有效，但文本将在按钮的右侧，这不是我需要的。