如何创建悬停效果并带来 2 个不同的 <a href> 标签？

Question

就我而言，我想实现完全相同的目标，但不知道该怎么做。

.apply-button {
    position: absolute;
    margin-top: 8rem;
    border-radius: 5em;
    box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 0.275rem;
    border-image-slice: 0;
    border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}

<a role="button" class="apply-button" href="#"><p>apply</p></a>

Answer 1

试图理解你的问题，但没有得到你真正想要的：

这里是实现悬停效果的示例代码

.showOnHover{display : none;}
.apply-button:hover .showOnHover{
    display : inline;
}
.apply-button:hover{
   display:block;
   text-align : center;
}
.apply-button {
    display : inline-block;
    margin-top: 8rem;
    border-radius: 5em;
    box-shadow: 0 8px 4px 0 rgba(0, 0, 0, 0.25);
    border-style: solid;
    border-width: 0.275rem;
    border-image-slice: 0;
    border-image-source: linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
    background-origin: border-box;
    background-clip: content-box, border-box;
    background-image: linear-gradient(to bottom, #ffffff, #ffffff), linear-gradient(to top, #0270bb, #c6e357, rgba(255, 153, 0, 0.9));
}

<p class="apply-button"><a role="button" href="#">apply</a> <span class="showOnHover"> | <a role="button" href="#">apply</a></span></p>

如何创建悬停效果并带来 2 个不同的 <a href> 标签？

How to create hover effect and bring 2 different <a href> tag?

html

css

hover