Подчеркните первую букву тега привязки в списке при наведении курсора, используя jQuery или CSS - PullRequest
Новая
       3

Подчеркните первую букву тега привязки в списке при наведении курсора, используя jQuery или CSS

3 голосов
/ 18 мая 2011

Я пытаюсь подчеркнуть первую букву ссылки при наведении курсора на каждый элемент списка. Я попробовал селектор CSS first_letter, но все, что он делает, это подчеркивает первую букву первого элемента.

Вот список: 

<ul class="list">
   <li><a class="underline" href="Lingua%20Franca.html">Lingua Franca</a></li>
   <li><a class="underline" href="Within%20Within.html">Within Within</a></li>
   <li><a class="underline" href="Kind%20Pockets.html">Kind Pockets</a></li>
</ul>

Я пробовал это и многие его варианты: 

a.underline:hover:first-letter{
  text-decoration: underline;
}

Ответы [ 6 ]

6 голосов
/ 18 мая 2011

Ну, ::first-letter - это псевдоэлемент, а не псевдокласс, поэтому он требует двух двоеточий:

http://www.w3.org/TR/css3-selectors/#first-letter

Однако я начал играть вокругв JSFiddle в Chrome , и кажется, что есть проблемы, используя их вместе.Еще до того, как включить элемент привязки и подчеркивание по умолчанию, я попробовал это с ванилью LI s (без ссылок в них): 

li::first-letter:hover {
 text-decoration: underline;   
}

и 

li::first-letter:hover {
 text-decoration: underline;   
}

и ни с одной из нихсработало, хотя 

li::first-letter {
 text-decoration: underline;   
}

действительно работает.

Возможно, вам придется просто обернуть эти первые буквы в промежутке собственным классом вместо того, чтобы полагаться на ::first-letter.

4 голосов
/ 19 мая 2011

Вот чистое решение CSS, которое работает в браузерах webkit, таких как Chrome и Safari.

http://jsfiddle.net/mqchen/cQCSp/

После небольшой попытки я наконец-то получил чистое решение CSS, которое также работает в Firefox 4:

http://jsfiddle.net/mqchen/cQCSp/3/

CSS: 

.list a.underline {
    display: block;
    text-decoration: none;
}
.list li .underline:first-letter {
    text-decoration: underline;
}
.list li:not(:hover) .underline:first-letter {
    text-decoration: none;
}
4 голосов
/ 19 мая 2011

Если вы хотите сделать это с помощью jQuery, это будет работать до тех пор, пока содержимое якоря не будет сложным

2 голосов
/ 19 мая 2011

Вот, пожалуйста (не касаясь html-части):

http://jsfiddle.net/sLdWL/

1 голос
/ 18 мая 2011

Я думаю, это то, что вы имеете в виду: 

<ul class="list">
    <li><a class="underline" href="Lingua%20Franca.html"><span class="first">L</span>ingua Franca</a></li>
    <li><a class="underline" href="Within%20Within.html"><span class="first">W</span>ithin Within</a></li>
    <li><a class="underline" href="Kind%20Pockets.html"><span class="first">K</span>ind Pockets</a></li>
</ul>

a.underline {
    text-decoration:none;   
}
a.underline:hover .first {
    text-decoration:underline;   
}
0 голосов
/ 18 мая 2011

См. Эти:

Первая буква подчеркнута, без наведения: http://jsfiddle.net/WmBYQ/1/

Первая буква подчеркнута, наведите курсор на весь элемент: http://jsfiddle.net/WmBYQ/2/

Похоже,Селектор 1009 * хорошо подходит для тегов p.Я решил включить ваши li элементы в абзац, а затем изменить CSS, чтобы соответствовать этому.

...