图像仅在文本处于活动状态时显示

我正在制作MSN.com网页的副本，以便使用我的HTML和CSS进行练习。我已经设法获得标题，除了搜索表单之外，还有其他所有内容。现在我知道如何使形式，我只是不明白是怎么小件作品之一图像仅在文本处于活动状态时显示

例如：

看后续图片： http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

你可以看到它说： MSN（橙色部分），箭头/三角形位于它的正下方。我认为这个箭头是一个图像，对吗？你不能通过CSS来完成它？

所以我想知道如何去做一个在第一个单词默认的箭头，然后重新定位到活动链接/文本。

请让我知道。谢谢

来源

2013-02-10 James Mitchell

像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'); 
});

来源

2013-02-10 22:41:36 tovin

感谢这么多的帮助。另外，我怎样才能做到这一点，所以第一个“a”在网页开始时开始处于活动状态。这样，当网页打开时，箭头已经在“Web”上开始了。 – 2013-02-12 02:54:26

不客气！只需在网页启动时将“active”类别添加到您希望激活的任何链接即可。我更新了我的答案和jsfiddle上的示例。 – tovin 2013-02-19 23:37:15

图像仅在文本处于活动状态时显示

回答

相关问题