当您将鼠标悬停在彩色块上时,它会平滑地爬到文本下方。此时块背景上的部分文本有必要将其颜色更改为白色。我尝试了所有选项mix-blend-mode- 它们至少稍微改变了文本颜色hue,saturation但color它远非白色。其余的要么没有效果,要么将文本隐藏在背景下。
如何解决这个问题呢?这有可能吗?无需任何拐杖进行文本复制、打开/隐藏等。
main {
position: relative;
overflow: hidden;
margin: 30px 0;
}
.main-text {
position: relative;
max-width: 70%;
/*mix-blend-mode: ;*/
}
.color-block {
height: 100%;
width: 100%;
background-color: #2845AA;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: -90%;
transition: .5s;
}
.color-block:hover {
right: -40%;
}
<main>
<div class="color-block"></div>
<div class="main-text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloribus tenetur saepe optio corrupti earum? Eligendi fugit nemo, quibusdam quas vero error qui obcaecati placeat suscipit provident? Consectetur, alias velit dignissimos.</div>
</main>