Jump to content
  • 0

Не меняет цвет ссылки в ul li при hover


gikach
 Share

Question

Добрый день. Буду благодарен за помощь.

Есть горизонтальное выпадающее меню:

...

<ul id="nav" class="dropdown ">

<li class="dir">Каталог

<ul>

<li><a href="#">Буры</a></li>

<li><a href="#">Шнеки</a></li>

<li>Буровая техника</li>

<li><a href="#">Комплектующие</a></li>

<li><a href="#">Отзывы о продукции</a></li>

</ul>

</li>

...

Есть CSS который описывает внешний вид меню. (#e5cfa1 - светлый бежевый цвет, #332119 - темный коричневый )

ul.dropdown a:link { color: #e5cfa1; }

ul.dropdown a:hover { color: #332119; }

ul.dropdown a:active { color: #332119; }

ul.dropdown { text-decoration:none; color: #e5cfa1; font-family: Arial; font-size: 12px; height:12px; text-align:left; }

ul.dropdown li { background-color: #332119; color: #e5cfa1; text-decoration:underline; }

ul.dropdown li.hover, ul.dropdown li:hover { background-color: #e5cfa1; color: #332119; }

ul.dropdown ul li { font-weight: normal; padding:3px 0px 3px 5px; width:165px; }

ul.dropdown ul li a:hover{ font-weight: normal; padding:3px 0px 3px 5px; width:165px; color: #332119; background-color: #e5cfa1; } класс, при ховере который меняет все, кроме цвета ссылки, если только курсор не на самой ссылке .

ul.dropdown *.dir { padding-right: 20px; }

Необходимо чтобы цвет ссылки менялся не только при наведении на ссылку но и просто при наведении на область соответствующего выпадающего меню.

158671xpsnc.jpg - курсор на области (цвет ссылки не сменился, но сменился цвет бекграунда

158672lytmk.jpg - курсор на ссылке (цвет ссылки сменился

158673avzpr.jpg - если в меню не ссылка, а просто текст - цвет меняется!

Edited by gikach
Link to comment
Share on other sites

12 answers to this question

Recommended Posts

  • 0
не совсем понял, что вы хотите, но возможно нужно добавить display:block для ul.dropdown ul li a ...

Поддерживаю и уточняю. Функции, которые Вы сейчас возлагаете на LI:hover перенести на A:hover с display:block, тогда и LI.hover не понадобится.

Link to comment
Share on other sites

  • 0

Увы но добавление display:block; ни к чему не привело.

Ниже последний код который используется для оформления меню. Еще раз попытаюсь объяснить что мне нужно, при навигации по выпадающему меню необходимо менять цвет бекграунда и цвет шрифта. Так вот цвет бекраунда меняется, а цвет ссылки меню - нет. Для наглядности скину в ЛС линк. Еще раз заранее спасибо.

ul.dropdown a:link 	{ color: #e5cfa1; }
ul.dropdown a:hover { color: #332119; }
ul.dropdown a:active { color: #332119; }

ul.dropdown {
text-decoration:none;
color: #e5cfa1;
font-family: Arial;
font-size: 12px;
height:12px;
text-align:left;
}

ul.dropdown li {
background-color: #332119;
color: #e5cfa1;
text-decoration:underline;
}

ul.dropdown li.hover ,
ul.dropdown li:hover {
background-color: #e5cfa1;
color: #332119;
}

ul.dropdown ul li {
font-weight: normal;
padding:3px 0px 3px 5px;
width:165px;
}

ul.dropdown *.dir {
padding-right: 20px;
}

Link to comment
Share on other sites

  • 0
ul.dropdown li.hover ,

ul.dropdown li:hover {

background-color: #e5cfa1;

color: #332119;

}

и что же вы от этого хотите? Если бы в лишке был просто текст то он поменялся бы, но там ссылка! Значит:

ul.dropdown li.hover ,
ul.dropdown li:hover {
background-color: #e5cfa1;
}
ul.dropdown li.hover а,
ul.dropdown li:hover а {
color: #332119;
}

Както так...

Link to comment
Share on other sites

  • 0
и что же вы от этого хотите? Если бы в лишке был просто текст то он поменялся бы, но там ссылка! Значит:

ul.dropdown li.hover ,
ul.dropdown li:hover {
background-color: #e5cfa1;
}
ul.dropdown li.hover а,
ul.dropdown li:hover а {
color: #332119;
}

Както так...

Да все так и есть - если текст то цвет меняется, если ссылка то нет!. Но черт побери,

ul.dropdown li.hover а,

ul.dropdown li:hover а {

color: #332119;

} - не работает!! скинул ссылку в ЛС.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy