html - 仅当文本处于事件状态时才显示图像

Question

我正在制作一份 MSN.com 网页的副本，以练习我的 HTML 和 CSS。我已经设法获得标题，以及除搜索表单之外的所有内容。现在我知道如何制作表格了，我只是不明白其中一个小部件是如何工作的

例如:

请看下图: http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

您可以看到上面写着 MSN 的地方(橙色部分)，箭头/三 Angular 形就位于它的正下方。我假设这个箭头是图像，对吗？你不能只通过 CSS 实现吗？

所以我想知道如何在第一个单词处设置默认箭头，然后重新定位到事件链接/文本。

请告诉我。谢谢

Answer 1

MSN 使用的简单灰色箭头实际上可以使用 CSS 制作。要使其跟随选定的链接，您需要使用 JavaScript。别担心，这很简单。

首先，这是 jsfiddle 上的一个实例: http://jsfiddle.net/EBhVu/23/

HTML:

<a href="#" class="active">Web</a> 
<a href="#">MSN</a>
<a href="#">Images</a>

CSS:

这将构建灰色小箭头并将其放置在所选链接下方

a  {
    position:relative;
}
a:active:after, a.active:after  {
    position:absolute;
    right:50%; /* Centers arrow */
    top:100%; /* Places arrow below link */
    content:" ";
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; /* Builds the arrow */
    border-right: 5px solid transparent;
    border-bottom: 5px solid grey;
}

JavaScript:

每次单击链接时，此 JavaScript 都会为单击的链接赋予“事件”类

$('a').on('click',function(){
    $('a').removeClass('active'); 
    $(this).addClass('active'); 
});