X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Изменения цвета ссылок внутри списков при наведении курсора на элемент списка li
Andy Superstar
Andy Superstar
Topic Starter сообщение 4.8.2008, 23:18; Ответить: Andy Superstar
Сообщение #1


У меня проблема:

1) фон li белый, цвет ссылкам a задан чёрный.

2) при наведении на li должно быть так: фон у li на чёрный, а ссылки становятся белыми.

Только, через тэг li в стилях не задаш цвет, потому что внутри элемента на ссылки это не действует. А если задать н а hover у a цвет текста белый, то всё нормально, но вот при наведении на li текст остаётся чёрным и сливается с фоном.

Может кто имел с этим дело. Вроде бы просто как 2 пальца, но вот закорючка.
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
k3ymak3r
k3ymak3r
сообщение 5.8.2008, 12:50; Ответить: k3ymak3r
Сообщение #2


не задавайте елементу <li> цвет фона. для a:hover пропишите следующий класс:

A:hover
{
background-color: #000000;
color: #ffffff;
}


вот и вся "закорючка" ;)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 15.8.2008, 18:36; Ответить: Andy Superstar
Сообщение #3


Да не тут-то было. Трабл втом, что элменты li по имееют фиксированную ширину и соответственно эта ширина больше ширины элемента a.

Выходит так: при наведении выделяется фоном, ссылка-слово, ну а слева и справа ничего не выделяется.

Так что есть какие мысли у кого, как реализовать?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 15.8.2008, 22:21; Ответить: Exterior
Сообщение #4


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">

<title>li test</title>

<style type="text/css">
<!--
ul {
list-style: none;
}

li {
width: 200px;
margin: 2px;
background: white;
border: solid 1px red;
}

li a {
width: 100%;
display: block;
color: black;
background: white;
text-decoration: none;
}

li a:hover {
color: white;
background: black;
}
--
>
</style>

</head>

<body>

<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

</body>
</html>


так?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 15.8.2008, 23:14; Ответить: Andy Superstar
Сообщение #5


Да это действует. Но есть одно "но":

На форуме htmlbook усердно настаивают, что li a является строчным и никак не блочным элементом. Другими словами они говорят, что применять li a является не правильным.

Можно ещё как-нибудь обойтись без display: block; для li a?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 15.8.2008, 23:52; Ответить: Exterior
Сообщение #6


(' post='10389 @ 16.8.2008, 02:14)
Другими словами они говорят, что применять li a является не правильным

нигде в спецификации такого не сказано, кроме того, любой строчный элемент, ставший впоследствии блочным, может содержаться внутри блочного, что и есть в данном случае, стандарты это допускают, пример:
<div>text <p style="width:50px; display:block;">text</p> <span style="width:50px; display:block;">text</span></div>


(' post='10389 @ 16.8.2008, 02:14)
Можно ещё как-нибудь обойтись без display: block; для li a?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>li test</title>

<style type="text/css">
<!--
ul {
list-style: none;
}

li {
width: 200px;
margin: 2px;
border: solid 1px red;
cursor: pointer;
}

.li_over {
color: white;
background: black;
}

.li_out {
color: black;
background: white;
}
--
>
</style>

</head>

<body>

<ul>
<li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li>
<li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li>
<li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li>
<li onmouseover="this.className='li_over';" onmouseout="this.className='li_out';" onclick="location.href='#';">Link</li>
</ul>

</body>
</html>


P.$. всегда пользовался первым вариантом и проблем не возникало
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 16.8.2008, 3:23; Ответить: Andy Superstar
Сообщение #7


Я тоже всегда пользовался первым, тем более в туториалах различных именно display:block; и указано. Но вот, уверяют в обратном. В любом случае варианты полезные.

Кстати по поводу ссылок: что лучше использовать?

Конструкцию

<li><a href="#">Link</a></li>


или же

<li onclick="location.href='#';">Link</li>


Какая разница между этими втжами указания ссылки?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 16.8.2008, 11:03; Ответить: Exterior
Сообщение #8


во втором случае роботы не увидят ссылку, соответственно, не проиндексируют.
Если таким образом делать меню на сайте, это сильно затруднит индексацию внутренних страниц.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Andy Superstar
Andy Superstar
Topic Starter сообщение 16.8.2008, 15:04; Ответить: Andy Superstar
Сообщение #9


А, окей. Значит блоками опять делать будем.

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на первый заказ.
Мегамаркет. Скидка 1000 рублей при покупке от 5000 рублей на все, на п
6 stu999 1551 21.3.2024, 20:45
автор: stu999
Открытая тема (нет новых ответов) Сайт не индексируется в Google без добавления ссылок в адурилку
4 Nekit 985 20.3.2024, 21:44
автор: MorKer
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыБыстрая индексация страниц сайта и обратных ссылок - 2Index
32 2Index 5812 18.3.2024, 16:33
автор: 2Index
Горячая тема (нет новых ответов) Оптимизация сайтов, продвижение, наращивание ссылок
Большой опыт работы, отзывы
304 tario777 203064 13.3.2024, 14:01
автор: tario777
Горячая тема (нет новых ответов) Тема имеет прикрепленные файлыРучное размещение вечных ссылок и статей на хороших площадках
Опыт 10 лет!
419 leonidukg 273826 12.3.2024, 15:17
автор: leonidukg


 



RSS Текстовая версия Сейчас: 28.3.2024, 20:45
Дизайн