There is a list in the form of a menu:

<ul class="menu"> <li> <a href="#">fond</a> </li> <li> <a href="#">blago</a> </li> <li> <a href="#">knigi</a> </li> </ul>

And cascade table:

 <style> ul { margin-top:20px; list-style:none; } li { float:left; width:80px; height:30px; line-height:30px; background:#6495ED; text-align:center; margin-left:1px; border-radius:10px 10px 0 0; } ul li a { text-decoration:none; color:black; font-size:19px; } ul li:hover { margin-top:-20px; height:50px; line-height:50px; background:#000080; color:red; font-weight:bold; } ul li a:hover { color:red; font-weight:bold; } </style>

When you hover over a menu item, the text color should be red, but for some reason it remains black. It turns red only when you hover over a link, and I need the text to turn red, even when the cursor does not touch the link.

Tell me what to do?

  • one
    @Roma Proger To format the code, select it with the mouse and click on the button 101010 of the editor. - Rules
  • Do you happen to have this in IE <8? In IE <8, the pseudo-class: hover responds normally only to the <a /> tag - Rules
  • No, this is in Chrome, I work - Roman Sokolov
  • and what is the button 101010? - Roman Sokolov
  • one
    PS @ Roma Proger: hover: active: link, etc. These are not “triggers” but pseudo-classes. Triger is part of the microprocessor circuit and the register too :) - Rules

3 answers 3

Solution using JavaScript (works in all browsers):

 <html> <head> <title>Сила JavaScript и DOM</title> <style> ul.menu{ background-color: #00FF00; } ul li a{ color: #000000; } ul li a.lihover{ color: #FF0000; } </style> <script> function getElementsByClassName(where, className){ //Функция работает во всех //браузерах а document.getElementsByClassName везде кроме IE<9 var allElements = where.getElementsByTagName("*"); //Получаем все тэги var elements = []; for(var i=0;i<allElements.length;i++){ if(allElements[i].className==className){ // Отсеиваем по className elements.push(allElements[i]); } } return elements; // Возвращяем результат } function mover(evt){ // Функция когда мышь в пределах li liobj=window.event ? window.event.srcElement : evt.target; //Получаем обьект на //который направили мышь предположительно li if(liobj.tagName=="LI"){ // Если дейстаительно это li то obj=liobj.firstChild; // За обьект принимаем первого ребёнка li (у нас это a) obj.className = "lihover"; // Присваеваем обьекту новый класс } } function mout(evt){ // Функция когда мышь за пределами li liobj=window.event ? window.event.srcElement : evt.target; // Тоже самое if(liobj.tagName=="LI"){ obj=liobj.firstChild; obj.className = ""; //Присваиваем обьекту класс по умолчанию } } window.onload=function(){ //После загрузки страницы var elements; //Получаем все тэги с классом menu if(document.getElementsByClassName){ // Проверяем не IE<9 ли это? elements = document.getElementsByClassName("menu"); } else{ elements = getElementsByClassName(document, "menu"); } for(var i=0; i<elements.length; i++){ // Каждому присваиваем события elements[i].onmouseover=mover; // onMouseOver elements[i].onmouseout=mout; // и onMouseOut } } </script> </head> <body> <ul class="menu"> <li><a href="#">fond</a></li> <li><a href="#">blago</a></li> <li><a href="#">knigi</a></li> </ul> </body> </html>

UPD :

@ Roma proger you were right, I tested everything and found out that: the color a:hover inside <li/> does not change the color <a/> but changes the color of <li/> this new CSS feature for me thanks for opening it for me :)

PS: the best alternative is proposed @ Kotik 'om: ": Functions for searching elements by classes and tags

PPS: because the best answer is already given @omgwtf then I will not rewrite my answer

  • everything is good, but there is one thing but I need so that when the cursor is removed, the link becomes the same and one more request if you can, please document the javascripta functions, you just want to understand this and not just stupidly copy and paste - Roman Sokolov
  • Corrected! Now everything is normal ... - Rules
  • glad we helped each other :)) - Roman Sokolov
  • @Rules and @ Roma Proger, updated his answer. See how it will work for you. Personally, everything works for me. - Dobby007
  • @ Roma Proger, I perfected my answer now you can set properties when: hover listing them: ul li a.lihover {// here} I’ve commented in great detail to anyone now I hope it’s clear how big and powerful JavaScript is :) - Rules

This is just the wrong selector. http://jsfiddle.net/DL6z5/

 ul li:hover

Changes li on hover.

 ul li a:hover

Changes a on hover.

And you need to change a when you hover on li

 ul li:hover a

I would make a slightly different css http://jsfiddle.net/bjS8D/1/

 ul li { float: left; margin-left: 1px; } ul li a { display: block; margin: 20px 0 0 0; width: 80px; text-align: center; height: 30px; line-height: 30px; color: #000; background: #6495ED; font-size: 19px; text-decoration: none; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0; -webkit-transition: color .5s ease; -o-transition: color .5s ease; -ms-transition: color .5s ease; -moz-transition: color .5s ease; } ul li a:hover { height: 50px; line-height: 50px; background: #000080; color: red; font-weight: bold; margin: 0; }
  • @omgwtf you are the only one of all of us who really sleep CSS :) IMHO - Rules
  • @omgwtf, omg wtf)))) I agree you are the best) Also, the smooth flow was done ...))) - Dobby007
  • @omgwtf but where did you learn CSS? - Rules
  • @Rules books + lots of practice - omgwtf
  • And which books (especially about -moz- -o- and any such selectors are interesting) can I ask? - Rules

You clearly stated that the link should always be black. Even when hovering. If you want to work, you need to specify the changing properties in the parents ul li. Here ... Ie:

 <style> ul { margin-top:20px; list-style:none; } li { color:black; float:left; width:80px; height:30px; line-height:30px; background:#6495ED; text-align:center; margin-left:1px; border-radius:10px 10px 0 0; } ul li a { text-decoration:none; font-size:19px; } ul li:hover { margin-top:-20px; height:50px; line-height:50px; background:#000080; color:red; font-weight:bold; } </style>

UPD:

People, you are not in a hurry to dismiss the CSS solution so soon. From the first time it is rarely what happens))) You know yourself :) Here. I checked everything.

 ul { margin-top:20px; list-style:none; } li { color:black; float:left; width:80px; height:30px; line-height:30px; background:#6495ED; text-align:center; margin-left:1px; border-radius:10px 10px 0 0; margin-top: 20px;} ul li a { text-decoration:none; font-size:19px; color: black; } ul li:hover { margin-top:0; height:50px; line-height:50px; background:#000080; color:red; font-weight:bold; } ul li:hover a { color:red; font-weight:bold; }

ul li:hover a - and that is the magic line))

  • one
    And yes, I remembered there is a pseudo-class: link which allows not forcibly forcing the link to have the necessary sv-va by default, so that when you specify: hover, everything works i: ul li a: link {\\ Style for a} ul li a: hover { \\ Style for a with: hover} - Rules
  • No, this is all not, hover, the more I have already installed. Answer 1 from Dobby007 didn’t work either. The links just turned blue - Roman Sokolov
  • okay, waiting for an answer - Roman Sokolov
  • Tested ... @ Dobby007 your code in IE8 works strangely and in IE <8 does not work at all! That's why I love JavaScript and DOM :) - Rules
  • Fucking IE ... Well, okay ... Damn it) Where are you testing your code so fast in all IE? What kind of program? - Dobby007