Каков наилучший способ вернуть оригинальный стиль, когда jewery mouseleave?

-1

Я использую mouseenter для ввода нового html. Я сталкиваюсь с проблемой, что мне нужно вернуть оригинальный стиль, когда мышь уходим? Когда mouseleave, мне нужно удалить новый html и использовать оригинальный html. Каков наилучший способ сделать это?Каков наилучший способ вернуть оригинальный стиль, когда jewery mouseleave?

var eye_disease1 = $('#eye_disease1'); 
 
eye_disease1.mouseenter(function() { 
 
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn(); 
 
    eye_disease1.css('border', 'none'); 
 
}).mouseleave(function() { 
 
    // what should I put here to return the original 
 
});

источник

2015-05-06 conan

Сохраните html (' eye_disease1.html() ') и восстановите его. Но я не думаю, что это лучший способ. Если вы нацелены на всплывающие подсказки, возможно, есть скрытый HTML, который открывается при наведении курсора мыши. Таким образом, у вас есть содержимое подсказки внутри вашего html. – Rouby

Получить оригинальный HTML из eye_disease1 перед изменением и после обновления отпуска мыши HTML.

var eye_disease1 = $('#eye_disease1'), 
    diseaseHtml = ''; 

eye_disease1.mouseenter(function() { 
    if (!diseaseHtml) { 
     diseaseHtml = eye_disease1.html(); 
    } 
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>').hide().fadeIn(); 
    eye_disease1.css('border', 'none'); 
}).mouseleave(function() { 
    diseaseHtml = ''; 
    eye_disease1.html(diseaseHtml); 
});

источник

2015-05-06 05:42:04 Tushar

Спасибо за ваше время. Оно работает. – conan

@conan проверить обновленный ответ – Tushar

var eye_disease1=$('#eye_disease1'); 
var eye_disease1_html; 
eye_disease1.hover(
    function() { 
    eye_disease_1_html = eye_disease1.html(); 
    eye_disease1.html('<span class="show_li">symptoms</span><span class="show_li_2">diseases</span>') 
    .fadeOut(0) 
    .css('border','none') 
    .fadeIn(400); 
    }, function() { 
    eye_disease1.find('span.show_li, span.show_li_2') 
    .fadeOut(400) 
    .delay(400) 
    .html(eye_disease1_html) 
    .fadeIn(0); 
    } 
);

Но да, я предпочел бы, чтобы все содержимое внутри (оригинал, и парил содержание) там все время.

HTML:

<div id="eye_disease1"> 
    <div class="original-content"> 
     Original Content 
    </div> 
    <div class="hovered-content"> 
     <span class="show_li">symptoms</span> 
     <span class="show_li_2">diseases</span> 
    </div> 
</div>

CSS:

.hovered-content { 
    display: none; 
} 

.hovered { 
    border: none; 
}

JS:

$('#eye_disease1').hover(
    function() { 
    $(this).addClass("hovered"); 
    $(this).find(".original-content").fadeOut(); 
    $(this).find(".hovered-content").fadeIn(); 
    }, function() { 
    $(this).removeClass("hovered"); 
    $(this).find(".hovered-content").fadeOut(); 
    $(this).find(".original-content").fadeIn(); 
    } 
);

Вы можете увидеть его здесь: https://jsfiddle.net/waga7Lu1/3/ Переход Эффект немного неуклюжий, но я не совсем уверен, что вы после.

источник

2015-05-06 05:48:50 braks

все Вы можете использовать addClass

`$ ("селектор") MouseEnter (функция() {$ (это) .addClass ("активный"); }).

$ («selector»). mouseleave (function() { $ (this) .removeClass («active»); }) `

источник

2015-05-06 05:50:20 Mitul

Каков наилучший способ вернуть оригинальный стиль, когда jewery mouseleave?

ответ

Смежные вопросы