悬停时更改按钮文本

Question

我想在鼠标悬停在按钮上时更改按钮的文本，我找到了一个解决方案，但出于某些原因它不起作用。

我希望发生的是当我悬停在按钮上时，它会变为绿色，并将文本更改为已完成！。

目前当我悬停在按钮上时，按钮会改变颜色，但文本不会改变。

这是我的CSS：

.button {
     border: 0px solid #004B84;
     background: red;
     padding: 3px 21px;
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
     color: #ffffff;
     font-size: 12px;
     font-family: Questrial;
     text-decoration: none;
     vertical-align: middle;
     letter-spacing: 2px;
    }
   
   .button:hover {
     border: 0px solid #1292e1;
     background: green;
     color: white !important;
     content: "Completed!" !important;
    }
   
   .button:active {
     background: #1292e1;
     color: white;
     text-decoration: none !important; 
    }

<button class="button" type="submit" name="completed" value="">New Request</button>

以下是按钮的HTML代码：

<button class="button" type="submit" name="completed" value="">新请求</button>

这个按钮可以用于提交表单或执行其他操作。请确保在使用时将其与相关功能进行连接。

- K. Rogers

Answer 1

你可以使用伪元素来实现这个功能。

.button {
  width: 150px; /* set a width so it doesnt change upon hover */
   border: 0px solid #004B84;
   background: red;
   padding: 3px 21px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   color: #ffffff;
   font-size: 12px;
   font-family: Questrial;
   text-decoration: none;
   vertical-align: middle;
   letter-spacing: 2px;
}

.button:hover span {
  display:none
}

.button:hover:before {
  content:"Completed!";
}

.button:hover {
  background-color: green;
}

<button class="button">
 <span>New request</span>
</button>

- rpm192

---

现在正在进行这项任务，是否有一种方法可以使按钮的大小在鼠标悬停时不改变？ - K. Rogers

设置宽度，它将保持不变 :) - rpm192

Answer 2

使用CSS（不需要HTML）：

您无需手动更改HTML（添加<span>标签，手动删除HTML元素内容等），即可实现此操作。

只需将按钮的文本内容 font-size 设置为 0px ，然后使用 :hover，::after 和::after:hover 添加自己的文本和字体大小到按钮中。

---

查看以下代码片段并运行它，了解如何仅使用CSS编辑按钮内容的实用示例：

.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}

.button::after {
content: "New Request";
}
.button:hover::after {
 content: "Completed!";
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}

<button class="button" type="submit" name="completed" value="">New Request</button>

JavaScript:

只需使用textContent（）属性在鼠标悬停（ mouseover ）时更改文本为 Completed ，并在悬停取消时（ mouseout ）返回到 New Request 。

检查并运行以下代码片段，了解上述JavaScript方法的实际示例：

var btn = document.querySelector(".button");

btn.addEventListener("mouseover", function() {
  this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
  this.textContent = "New Request";
})

.button {
  min-width: 100px;
  min-height: 22px;
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}

<button class="button" type="submit" name="completed" value="">New Request</button>

- AndrewL64

---

我喜欢这个解决方案，因为它提供了CSS和JS的解决方案。 - Codingwiz

Answer 3

@K. Rogers，尝试使用代码希望这对您有用！

    /* .button */
    .button {
      display: inline-block;
      position: relative;
      border: 0px solid #004B84;
      background: red;
      padding: 8px 25px;
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      border-radius: 16px;
      color: #ffffff;
      font-size: 12px;
      font-family: Questrial;
      text-decoration: none;
      vertical-align: middle;
      letter-spacing: 2px;
      overflow: hidden;
    }
    .button:hover { background: green; }
    .button span {
        transition: 0.6s;
        transition-delay: 0.2s;
    }
    .button:before,
    .button:after {
        content: '';
        position: absolute;
        top: 0.67em;
        left: 0;
        width: 100%;
        text-align: center;
        opacity: 0;
        transition: .4s,opacity .6s;
    }

    /* :before */
    .button:before {
        content: attr(data-hover);
        transform: translate(-150%,0);
    }
    /* :after */
    .button:after {
      content: attr(data-active);
      transform: translate(150%,0);
    }
    /* Span on :hover and :active */
    .button:hover span,
    .button:active span {
        opacity: 0;
        transform: scale(0.3);
    }
    /* :before pseudo-element on :hover 
        and :after pseudo-element on :active */
    .button:hover:before,
    .button:active:after {
        opacity: 1;
        transform: translate(0,0);
        transition-delay: .4s;
    }
    .button:active:before {
        transform: translate(-150%,0);
        transition-delay: 0s;
    }

   <button class="button" type="button" data-hover="COMPLETED" data-active="I'M ACTIVE"><span>New Request </span></button>

- Asiya Fatima

Answer 4

这里有另一种解决方案，无需更改按钮的html代码。只需使用伪元素::after的css样式即可。为了防止鼠标悬停时按钮宽度发生变化，您需要定义width属性。

.button {
     border: 0px solid #004B84;
     min-width: 150px;
     background: red;
     padding: 5px 21px;
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
     color: #ffffff;
     font-size: 12px;
     font-family: Questrial;
     text-decoration: none;
     vertical-align: middle;
     letter-spacing: 2px;
     }
   .button:hover {
      background: green;
   }
   .button::after {
      content: "New request!";
    }
    
    .button:hover::after {
       content: "Completed!";
    }
   
   .button:active {
     background: #1292e1;
    }
    .button:active::after {
      background: #1292e1;
    }

<button class="button" type="submit" name="completed" value=""></button>

- Banzay

Answer 5

请参见：

https://www.w3schools.com/cssref/pr_gen_content.asp

content 属性与 ::before 和 ::after 伪元素一起使用，用于插入生成的内容。

您需要 JavaScript 或更多。

例如：

<button class="button" type="submit" name="completed" value="" onmouseover="document.getElementsByName('completed')[0].innerHTML ='Completed!';" onmouseleave="document.getElementsByName('completed')[0].innerHTML ='New Request';">New Request</button>

- PdM

Answer 6

如果你想要更改页面上一个元素的值，那么你需要通过代码来实现 - 尝试使用JavaScript来实现。

编辑： 似乎有一种方法： 如何使用CSS替换文本？

- user10929745

---

有没有使用 CSS 的方法可以实现它？ - K. Rogers

当然，你可以使用JS，但你只需要用CSS就能做到。 - rpm192