Как сохранить эффект подчеркивания в этой демонстрации, используя CSS?

Question

Как сохранить эффект подчеркивания в этой демонстрации, используя CSS?

0

Я новичок в CSS, и я хотел бы знать, как сохранить эффект подчеркивания (при зависании над ссылками в этой демонстрации) постоянным. Я могу использовать jQuery или javascript, чтобы сосредоточиться на элементе, но я хотел бы, чтобы подчеркивание оставалось даже после смещения фокуса мыши. Спасибо.

    <section class="blue-green">
    <nav id="cl-effect-4" class="cl-effect-4">
        <a id="focus-this" href="index.html">+ Create New</a>
        <a href="launch_approved.html">Launch Approved Campaigns</a>
        <a href="pending.html">Pending Approval</a>
        <a href="record.html">Your Campaign Record</a>
    </nav>
    </section>

user1330974 13 нояб. 2013, в 20:13

Источник

0

Присутствует всегда или сразу после первого зависания?
DaniP 13 нояб. 2013, в 18:45
0

Это сделало бы для очень нестандартного (читай: запутанный как черт) пользовательского опыта и потребовало бы сценариев.
isherwood 13 нояб. 2013, в 18:45
1

jsfiddle.net/bah4D/2
Morpheus 13 нояб. 2013, в 18:46
0

Привет @Danko, я имел в виду подарок всегда. Я думаю, что Морфеус показал мне способ сделать это. Он изменил «a: hover: after» на «a: after». Это то, что мне нужно было знать. Ишервуд, я согласен. Я только хотел подчеркнуть подчеркивание ссылки, на которую нажал пользователь. Будучи неосведомленным в CSS, я не знал, что мне нужно настроить, чтобы сохранить постоянное подчеркивание. Спасибо всем!
user1330974 13 нояб. 2013, в 19:19

Показать ещё 2 комментария

Теги:

jquery

css

html5

css3

2 ответа

0

Сделайте свой JQuery таким образом,

 $("#focus-this").hover(

 function () {
     $(this).focus(); }, function () {
     $(this).hover(); });

Вот вам рабочий скрипт !

Murshid Ahmed 13 нояб. 2013, в 16:49

0

Отлично сработано. +1 Конечно, для результата, запрошенного в OP, код должен быть 5px сплошным белым, например: .focus-this{border-bottom:5px solid white;} - я знаю, вы это знаете, TCG, но, возможно, ОП нет, поэтому я проясняю.
cssyphus 13 нояб. 2013, в 19:08
1

Этот результат не является постоянным. Когда вы щелкаете в любом месте страницы, подчеркивание удаляется.
Mathias Rechtzigel 13 нояб. 2013, в 19:10
0

Привет @TheCodeGuru, спасибо за помощь. Но так же, как указывал MathiasaurusRex, я бы хотел, чтобы подчеркивание было постоянным независимо от того, где я нажимаю. Цель состоит в том, чтобы подчеркнуть подчеркивание ссылки, по которой последний раз нажимали. Если у вас есть время, не могли бы вы обновить скрипку, чтобы показать мне правильный подход? Спасибо.
user1330974 13 нояб. 2013, в 19:21
0

@ gibberish Спасибо. user1330974 Извините, я немного опоздал, чтобы обновить его. Кажется, вы уже получили ответ :)
Murshid Ahmed 14 нояб. 2013, в 02:55
0

@MathiasaurusRex Поздравляю с решением.
Murshid Ahmed 14 нояб. 2013, в 02:59

Показать ещё 3 комментария

Ещё вопросы

Присутствует всегда или сразу после первого зависания?
Это сделало бы для очень нестандартного (читай: запутанный как черт) пользовательского опыта и потребовало бы сценариев.
Привет @Danko, я имел в виду подарок всегда. Я думаю, что Морфеус показал мне способ сделать это. Он изменил «a: hover: after» на «a: after». Это то, что мне нужно было знать. Ишервуд, я согласен. Я только хотел подчеркнуть подчеркивание ссылки, на которую нажал пользователь. Будучи неосведомленным в CSS, я не знал, что мне нужно настроить, чтобы сохранить постоянное подчеркивание. Спасибо всем!
Отлично сработано. +1 Конечно, для результата, запрошенного в OP, код должен быть 5px сплошным белым, например: .focus-this{border-bottom:5px solid white;} - я знаю, вы это знаете, TCG, но, возможно, ОП нет, поэтому я проясняю.
Этот результат не является постоянным. Когда вы щелкаете в любом месте страницы, подчеркивание удаляется.
Привет @TheCodeGuru, спасибо за помощь. Но так же, как указывал MathiasaurusRex, я бы хотел, чтобы подчеркивание было постоянным независимо от того, где я нажимаю. Цель состоит в том, чтобы подчеркнуть подчеркивание ссылки, по которой последний раз нажимали. Если у вас есть время, не могли бы вы обновить скрипку, чтобы показать мне правильный подход? Спасибо.
@ gibberish Спасибо. user1330974 Извините, я немного опоздал, чтобы обновить его. Кажется, вы уже получили ответ :)

Mathias Rechtzigel · Accepted Answer · 2013-11-13T17-23-00.000Z

Вы можете запускать событие hover с помощью JQuery, когда вы наводите курсор на свои якорные теги, которые добавили бы класс:

JQuery

$("a").hover(
  function () {
    $(this).addClass('focus-this');
  }
);

Дополнительный CSS

.focus-this{border-bottom:5px solid white;}

скрипка

Привет @MathiasaurusRex, ваше решение именно то, что я хотел. Добавить класс, когда завис или щелкнул. Большое спасибо.