Question

我希望能够在按钮悬停时让按钮内的文字发生变化。文本仅在悬停而不是整个按钮时更改颜色。按钮背景应为#FFFFFF，文本颜色应为＃3A75B0

HTML：

<div class="getStartedButton">
        <a href ="/signup">
            <button class="getStarted">
                Get Started
            </button>
        </a>
</div>

CSS：

.getStarted {
    display: table;
    margin: 0 auto !important;
    height: 170px;
    width: 300px;
    background: transparent;
    text-decoration: none;
    border-style: solid;
    border-color: #FFFFFF;
    font-family: Helvetica;
    text-align: center;
    color: #FFFFFF;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 60px;
    padding: 20px 10px 50px 10px;
    margin-bottom: 50px;
}

.getStarted a {
    text-decoration: none;
    font-family: Helvetica;
    text-align: center;
    color: #FFFFFF;
    font-size: 60px;
    margin-bottom: 50px;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}


.getStartedButton:hover {
    color: #3A75B0;
    background-color: #FFFFFF;
}

.getStartedButton {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10px;
}

.getStartedButton a:hover {
    color: #3A75B0;
}

.getStarted:hover {
    color: #3A75B0;
}

.getStartedButton.getStarted:hover {
   color: #3A75B0;
}

Answer 1

这在纯CSS中是不可能的。试试这个JS方法：

function changeText(button){
  
  button.innerHTML = "Text Changed!";
  
  }

<div class="getStartedButton">
        <a href ="/signup">
            <button onmouseover="changeText(this)" class="getStarted">
                Get Started
            </button>
        </a>
</div>

希望对你有用！

当按钮突出显示时，如何在按钮内获取文本以进行更改？

1 个答案: