javascript - 在悬停时将文本附加到链接标题？

Question

所以我正在开发我的投资组合网站。其中一列有四个 div，每个 div 内都有一个按钮 ()，可以指向不同的页面(简历、作品集、联系方式等)。我想弄清楚的是如何使用 { 和 } 创建各种选择器。我真的很喜欢每个链接周围的括号外观，例如，当您将鼠标悬停在 Resume 上时，它会从 Resume 变为 { Resume }。我弄乱 CSS 有一段时间了，在颜色上有一个很好的 1s 过渡，但我不知道如何让我的这个选择器想法发挥作用。我一直在尝试使用 JS/jQuery 在悬停时为每个添加和附加 { 和 }，但我似乎无法使其工作。我的 JS 绝对是初学者，我还没有从谷歌搜索中看到任何对此有帮助的东西。

这是相关列的代码:

<div class="col-xs-12 col-sm-3 col-lg-4">
           <div class="resume button links marginTop"><a href="resume.html" class="btn">Resume</a></div>
           <div class="portfolio links button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
           <div class="photography links button"><a href="photography.html" class="btn">Photography</a></div>
           <div class="contact links button"><a href="mailto:me@me.me" class="btn">Contact</a></div>
        </div>

还有我的 JS:

$(function() {
$('.links').hover(function(){
    var text = (this).text();
    $(this).text = "{ " + text + " }";
});});

我确定我弄乱了 HTML 或 JS(或两者)，但我似乎无法弄清楚。任何帮助都会很棒!

PS:当我问的时候，我应该为我的链接使用列表(UL？)还是像我目前在专栏中那样使用单独的 div？链接是垂直方向的。

Answer 1

仅 CSS 解决方案:(编辑:大括号放在链接内而不是围绕它)

.links:hover a:before {
  content: '{';
}
.links:hover a:after {
  content: '}';
}

<div class="col-xs-12 col-sm-3 col-lg-4">
    <div class="resume button links marginTop"><a href="resume.html" class="btn">Resume</a></div>
    <div class="portfolio links button"> <a href="portfolio.html" class="btn">Portfolio</a></div>
    <div class="photography links button"><a href="photography.html" class="btn">Photography</a></div>
    <div class="contact links button"><a href="mailto:me@me.me" class="btn">Contact</a></div>
</div>