Изображение, отображаемое только при активном тексте

Question

Я делаю копию веб-страницы MSN.com для практики с помощью моего HTML и CSS. Мне удалось получить заголовок и все выше него, кроме формы поиска. Теперь я знаю, как сделать формы, я просто не понимаю, как один из маленьких кусочков работает

Для примера:

Посмотрите на последующую картину: http://gyazo.com/497d24dde39c04d9956c2faec4eb556f

Вы можете увидеть, где он говорит, MSN (оранжевая часть), стрелка/треугольник находится прямо под ним. Я полагаю, что эта стрелка является образом, правильно? Вы не можете просто сделать это через 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'); 
});