Question

我正在开发一个网站，该网站在页面上集中了“雇用我”按钮。它是使用以下代码创建的：

<div id="hire_me_button">
    <a href="contact.html"><h4 id="hire_me" class="button">Hire Me</h4></a>
</div>



#hire_me_button {
text-align: center;
width: 73.3%;
}

.button {
   text-align: center;
   display: inline-block;
   width: 8em;
   height: 3em;
   background: rgba(0, 0, 0, 0.6);
   border: 1px solid black;
   padding: .75rem .625rem;
   border-radius: 8px;
   color: white;
   font-size: .875rem;
   font-family: Helvetica, Arial, Sans-Serif;
   text-align: center;
}

我想做的是通过更改文本来改变一点点 - 有人在鼠标悬停在按钮上或点击按钮时。我希望文本从“雇用我”变为明智的选择“或”明智的决定“取决于哪种更适合。

Answer 1

您可以在按钮上绑定悬停事件侦听器

$(function(){
    // bind a hover event listener
    $('#hire_me').hover(function(){
        $(this).text('wise choice'); // on hover in, change the text
    },function(){
        $(this).text('hire me'); // on hover out, change the text back
    });
});

如何在悬停或激活时更改元素的文本？

1 个答案: