Преобразуйте CSS {ul li: hover a} в JQUERY .hover - PullRequest
Новая
       5

Преобразуйте CSS {ul li: hover a} в JQUERY .hover

4 голосов
/ 14 декабря 2010

Я хочу сейчас, если есть способ преобразовать свойства css в jquery .hover или управлять этим с помощью javascript, чтобы динамически изменять цвет.

CSS: 

ul li:hover a {
    color: #FFF;
}

Может ли кто-нибудь помочь?

EDIT:

Моя проблема:

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

JQuery: 

$("ul li").hover(function () {          
    $(this).stop().animate({ backgroundColor: "white"}, 500);
}, function () {
    $(this).stop().animate({ backgroundColor: "black"}, 400);
});

Для анимации цвета фона при наведении в меню и подменю.

Например, если текст черный, я хочу сделать текст белым при наведении курсора. Для этого я использую: (пример подменю, для изменения меню селектора курса) 

$('ul.submenu li a').hover(function () {        
    $(this).css({color:'#FFFFFF'});
}, function () {            
    $(this).css({color:'#00FF00'});
});

Все Это работает нормально, но когда я наведу курсор на подменю, меню возвращается в исходное состояние (потому что отпуск мышью активируется при наведении курсора). Все, что я хочу, это чтобы при подмене парения состояние меню в меню оставалось активным.

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

HTML Структура: 

<ul class="menu">

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

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

        <ul class="submenu">
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
          <li><a href="#">text</a></li>
        </ul>

      </li>

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

</ul>

Ответы [ 6 ]

2 голосов
/ 14 декабря 2010

Пожалуйста, дайте мне знать, если это правильно, о чем вы спрашиваете.

У меня не работает полностью, но посмотрите на это и посмотрите, поможет ли это: мой JSFiddle

Вот код на данный момент: 

   $(document).ready(function() {
       var sm;                       // submenu
       var delay = 500;              // delay before applying changes
       var tID;                      // timeout id
       var color_on  = '#fff'
         , color_off = '#000';
       var oPrev;


       $('ul.menu > li > a').hover(
          function() {
             if (tID && $(this) === oPrev) {clearTimeout(tID);}
             oPrev = $(this);
             sm  = $(this).next('.submenu');
             if(sm){sm.stop(true, true).fadeIn('slow');}
          },
          function() {
             if (tID) {clearTimeout(tID);}
             tID = setTimeout(
                      function() {
                         sm.stop(true, true).fadeOut('slow');
                      }, delay);
          }
       );

       $('.submenu > li > a').hover(
           function() {
              if (tID) {clearTimeout(tID);}
              oPrev.css('color',color_on);
              $(this).stop(true, true).fadeIn('slow');
           },
           function() {
              if (tID) {clearTimeout(tID);}
              sm  = $(this);
              tID = setTimeout(
                       function() {
                          oPrev.css('color','');
                          sm.closest('ul').stop(true, true).fadeOut('slow');
                       }, delay);
           }
       );
   });

И CSS: 

   a
   {
       color           : #000;
       text-decoration : none;
   }
   a:hover
   {
       color           : #fff;
   }

   ul li
   {
       background      : orange;
       border          : 1px solid black;
       display         : inline-block;
       padding         : 0 1em;
       vertical-align  : top;  
   }

   .menu
   {
       background      : #ccc;
       border          : 1px solid black;
       display         : inline-block;
       padding         : .25em 1em;
       vertical-align  : top;
   }
   .submenu
   {
       border          : 1px solid black;
       border-width    : 1px 0 0 0;
       display         : none;
   }
   .submenu li
   {  
       background      : red;
       border-width    : 0;
   }
   .submenu li a:hover
   {
       color           : #fff;
   }

Примечание. Я не говорю, что это лучший ответ и не является полным решением, но, возможно, что-то здесь поможет кому-то найти правильное решение.

2 голосов
/ 14 декабря 2010 
$("ul li a").hover(function() {
    $(this)
        .data("color", $(this).css("color"))
        .css("color", "#FFF");
}, function() {
    $(this).css("color", $(this).data("color"));
});

$("ul li").hover(function() {
    $(this).find("a")
        .data("color", $(this).css("color"))
        .css("color", "#FFF");
}, function() {
    $(this).find("a").css("color", $(this).data("color"));
});

Обновление:

Предполагая, что первый селектор (ul li a:hover) лишний, мы можем значительно упростить код: 

$("li").hover(function() {
    $(this).find("a").css("color", "#FFF");
}, function() {
    $(this).find("a").removeAttr("style");
});

Этот обновленный код также должен работать (при условии, что у вас нет дополнительного кода CSS внутри атрибута style элементов ANCHOR).

Обновление:

Альтернативное решение будет следующим: 

$("li").hover(function() {
    $(this).toggleClass("hover", $(this).is(":hover"));
});

с этим кодом CSS: 

ul li.hover a {
    color: #FFF;
}

Я настоятельно рекомендую это альтернативное решение!

0 голосов
/ 14 декабря 2010 
$('li').hover(
    function(){
         $(this).css({color:'white'}); //mouseover
    },
    function(){
         $(this).css({color:'black'}); // mouseout
    }
);
0 голосов
/ 14 декабря 2010

Привязать функцию наведения к тегу li.Всякий раз, когда указатель мыши / указатель мыши находится на теге <a>, событие всплывает до <li>

$(function(){   
    $("ul li").hover(function(){
        $(this).css("color", "#fff");
    },function(){
        $(this).css("color", "#000000");
    });
});

См. рабочая демонстрация

Если вы можете добиться эффекта с помощью CSS, тогда зачем искать решение javascript.

0 голосов
/ 14 декабря 2010

Конечно, просто используйте привязку при наведении. 

$("ul li a").bind("hover", function () {
    $(this).css("color", "#FFF");
});
$("ul li").bind("hover", function () {
    $(this).children("a").css("color", "#FFF");
});

Обратите внимание, что этот код не будет сбрасывать свойства CSS при наведении курсора мыши.Для этого вам нужно будет сохранить исходные значения цвета.

Вероятно, стоит установить для этого элемента a значение display: block, чтобы оно распространялось на весь родительский элемент li.Тогда вам нужно только навести курсор на одну из них.

0 голосов
/ 14 декабря 2010

Попробуйте это (сейчас протестировано: http://jsfiddle.net/nathan/J7HLV/):

$('ul li a, ul li').hover(function () {
  $(this).add($(this).children('a')).filter('a').css('color','#fff');
},function () {
  $(this).add($(this).children('a')).filter('a').css('color','');
});
...