css - 使用 :hover to change text displayed entirely?

Question

我已经... 发现没有其他论坛我可以通过它征求一些意见。我一直在为我的一个 friend 编辑网页的 CSS，他希望标题的文本在悬停时发生变化。问题是，我一直在努力让 :hover 为标题工作。考虑到这是她发现的一个“主题”(这可能更让人头疼)，或者是否有人知道如何获得要更改的文本。

她想要的是能够将鼠标悬停在她的头衔“Veoleth Dathgir”上，然后将其更改为不同的词，但无论多费心思，我都无法得到所需的结果。

我应该补充一点，我没有这方面的专业经验。我通过几年的爱好学会了。因此，考虑到这是一种学习经历——我应该如何影响我需要添加的更改？我一直在通过这里、谷歌、w3schools 等搜索并搜索了一两个小时，但……并没有真正得到任何结果。

整个页面的代码值(value)here ，以及此处的一些相关行:

    .title {
  font-family:'apple chancery',uppercase; /*title font*/
  font-size:30px;
  padding-top:90px;
  text-shadow:0 0 10px rgba(0,0,0,.3);
}

.subheader {
  margin-top:10px;
}

.header {
  width:550px;
  height:200px;
  -webkit-transition:ease-in-out .5s;
  -moz-transition:ease-in-out .5s;
  -o-transition:ease-in-out .5s;
  transition:ease-in-out .5s;
  text-align:center;
  letter-spacing:1px;
  color:#271717;
  border-bottom:solid #381F1F 20px;
  background-color:#423535;
  background-image:url();
  background-position:center;
  background-size:100% auto;
}

.header:hover {
  letter-spacing:3px;
  text-shadow:0 0 30px rgba(255,255,255,.6);
}

和

<div class="header">
<div class="title">Veoleth Dathgir</div>
<div class="subheader">Spurned Ghosts</div>
</div>

Answer 1

是的，您应该为此使用 jQuery。将它添加到 HTML 中 body 元素的底部，就在结束之前将 jQuery 添加到您的网站(如果您还没有使用它)...

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

然后我会在标题中添加一个 ID，像这样...

<div  id="thisTitle" class="title">Veoleth Dathgir</div>

然后你的 jQuery 看起来像这样，你可以把它直接添加到你的 HTML 中，在你的 body 标签的底部，就像这样......

<script>
//when you mouse over, change the text
$('#thisTitle').mouseover(function(){
  $(this).text('anythiny you want');
});
//when you mouse out, change it again to original (or anything)
$('#thisTitle').mouseout(function(){
  $(this).text('Veoleth Dathgir');
}); 
</script>

工作示例:https://codepen.io/wade-labs/pen/QqNaMO ，随意“导出”，选项位于右下角。