jQuery. CSS изменение цвета не работает - PullRequest
Новая
       8

jQuery. CSS изменение цвета не работает

4 голосов
/ 19 января 2012

Я пытаюсь изменить цвет моего текста в меню lavalamp. Я использую следующий плагин http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery

Однако я сделал следующее 

 $('#lava').mouseleave(function () {

    $('#lava li').removeClass('selected');  
     $('#lava li').css({color: '#FFF'});  
    //select the current item
    $(this).addClass('selected');  
    $(this).css("color", "white");     

});

Мышь оставляет, она меняет весь текст на черный, что является правильным, но затем $ (this) не меняется на белый

, вот копия кода и рабочая демонстрация

http://jsfiddle.net/aSr3J/

Ответы [ 3 ]

1 голос
/ 19 января 2012

Я полагаю, что вы после этого:

http://jsfiddle.net/aSr3J/20/

По существу ваша функция отпускания мышью должна выглядеть следующим образом 

$('#lava').mouseleave(function () {

    left = Math.round($(".selected").offset().left - $('#lava').offset().left);
    width = $(".selected").width();

    //Set the floating bar position, width and transition
    $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});   
    $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});      

});

Обратите внимание, что ятакже добавили определение цвета для ссылок в таблице стилей: 

#lava ul a li {  color:#fff; }

(Знаете ли вы, что включение элементов уровня блока, таких как li, во встроенные элементы, такие как a, допустимо только в HTML5?)

Что касается цвета текста меню, я также изменил $('#lava li').hover(function ()): 

   $('#lava li').hover(function () {

    //Get the position and width of the menu item
    left = Math.round($(this).offset().left - $('#lava').offset().left);
    width = $(this).width();
    $(this).css("color","black");

    //Set the floating bar position, width and transition
    $('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});   
    $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});    

//if user click on the menu
},function() { $(this).css("color","white");}).click(function () {

    //reset the selected item
    $('#lava li').removeClass('selected');  

    //select the current item
    $(this).addClass('selected');

});
0 голосов
/ 19 января 2012

Попытайтесь изменить цвет при наведении курсора на каждый значок

. 
// the follow preforms for loop on your li's
$("#lava li").each(function(i) {
        // this is the "hover" function, aka, mouseenter and mouseleave
    $(this).hover(function(eIn) { // this function allows you to do stuff while mouse is over object
        $(this).addClass('selected').css("color", "#FFF"); // FFF is white
    },
    function(eOut) { // this allows you to do stuff when mouse leaves object
        $(this).removeClass('selected').css("color", "#000"); // 000 is black
    });
});
0 голосов
/ 19 января 2012

Код почти наверняка не верен. Они используют ключевое слово «это» - волшебное чудовище, которое может меняться очень удивительно для программистов, использующих другие языки.

Сначала прочтите это, чтобы понять, что это такое и как оно модифицируется.

http://howtonode.org/what-is-this

А затем используйте прокси функции jquery (http://api.jquery.com/jQuery.proxy/) для инкапсуляции функции this в функцию. 

$('#lava').mouseleave($.proxy(function () {
    $('#lava li').removeClass('selected');  
    $('#lava li').css({color: '#FFF'});  
    //select the current item
    $(this).addClass('selected');  
    $(this).css("color", "white");     

}, this));
...