Question

所以我正在我的投资组合网站上工作。其中一个列有四个div，每个div都有一个内部按钮（），通向另一个页面（Resume，Portfolio，Contact等）。我想弄清楚的是如何使用{和}创建一个排序选择器。我真的很喜欢每个链接周围的括号外观，例如当你将鼠标悬停在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>

Answer 2

括号内a { display: block; } a span { opacity: 0; } a:hover span { opacity: 1; }：

<a href="#"><span>{</span>Resume<span>}</span></a>
<a href="#"><span>{</span>Portfolio<span>}</span></a>
<a href="#"><span>{</span>Photography<span>}</span></a>
<a href="#"><span>{</span>Contact<span>}</span></a>

:before

但我喜欢使用:after和git archive的@ mwl解决方案，因为在这种情况下，您将无法使用鼠标选择括号。

在悬停时附加文字链接标题？

2 个答案: