Question

当您将鼠标悬停在按钮上时，我正在尝试更改按钮的文本，我找到了一种解决方案，但由于某种原因，它无法正常工作。

我想发生的是，当我将鼠标悬停在其上时，它将变为绿色并将文本更改为Completed!。

当前，当我将鼠标悬停在其上时，按钮会更改颜色，但文本不会更改。

这是我的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="">New Request</button>

Answer 1

您可以使用psuedo元素执行此操作。

.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>

Answer 2

@K。罗杰斯尝试代码希望这对您有用！

    /* .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>

Answer 3

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 并返回到 New Request < / strong>悬停（mouseout）。

检查并运行以下代码段，以获取上述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>

Answer 4

这里是不更改按钮html代码的另一种解决方案。仅使用CSS样式的伪元素::after 为了防止悬停时更改按钮宽度，您需要定义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>

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>

Answer 6

如果要更改页面上元素的值，则需要按代码进行操作-尝试使用JavaScript进行操作

编辑：似乎有一种方法：

How can I replace text with CSS?

悬停时更改按钮文本

6 个答案:

CSS（无HTML）：

JavaScript：