Изменить текст при зависании, затем вернуться к предыдущему тексту

Question

У меня есть система комментариев, и у каждого комментария есть кнопка, которая обычно отображает количество ответов на нее. Я хочу, чтобы, когда пользователь наводил курсор на кнопку, текст меняется с «3 ответов» на «Ответить!», А затем, когда мышь покидает кнопку, текст возвращается к «3 ответам».

Поскольку количество ответов зависит от каждого комментария, я не могу выполнить простой скрипт mouseover/mouseout. Один из способов обойти это - передать количество ответов в виде переменной и сделать небольшую функцию, чтобы позаботиться об этом. Но должен быть более простой способ. Я попытался использовать: hover вещь в css, чтобы изменить содержимое тега (с содержимым свойства css), но пока не повезло.

Любая помощь приветствуется, спасибо!

Answer 1

Да, вы можете использовать CSS content. Чтобы переключиться между обычным текстом и «Ответ!», Поместите обычный текст в span и спрячьте это при паре.

HTML:

<button><span>3 replies</span></button> 

CSS:

button {width:6em} 
button:hover span {display:none} 
button:hover:before {content:"Reply!"} 

jsFiddle:

http://jsfiddle.net/4xcw7/2/

Edit: это работает в IE8, но не в режиме совместимости, поэтому я предполагаю, IE7 отсутствует. Будет ли это проблемой?

Answer 2

$('#button_id').hover(
    function(){ 
     $(this).text('Reply!'); 
    }, 
    function(){ 
     $.ajax({ 
      url: 'script.php', 
      type: 'post', 
      data: comment_id, 
      success: function(num_replies){ 
       $('#button_id').text(num_replies + ' replies'); 
      } 
     }); 
    } 
); 

Я думаю, вы могли бы использовать этот вид функции, когда вы останавливаетесь зависания, вы кормить Аякса называют свой комментарий идентификатор, и он возвращает # ответов на этот комментарий. Вы можете решить, как вы хотите сохранить/получить свой комментарий.

Answer 3

Я хотел бы использовать комбинацию JQuery .hover() и JQuery .data():

http://jsfiddle.net/5W4Bd/

HTML:

<div id="myDiv">default text</div> 

JavaScript:

$('#myDiv') 
    .data('textToggle', 5) 
    .hover(function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    }, function (e) { 
     var that = $(this); 

     // get the text from data attribute 
     var textToSet = that.data('textToggle'); 

     // save the current text so it can be reverted 
     that.data('textToggle', that.text()); 

     // set the new text 
     that.text(textToSet); 
    }); 

редактировать: не стесняйтесь, чтобы реорганизовать анонимный functi при использовании в качестве двух обратных вызовов для зависания, поскольку они точно такие же :)

Answer 4

Я думаю, что это был бы простой способ пойти на это. Используйте два пролета внутри вашей кнопки, один с контентом «x replies», один с контентом «Reply!». Используя CSS и: hover, вы просто переключаете, какой диапазон отображается при наведении.

HTML:

<button> 
    <span class="replies">5 Replies</span> 
    <span class="comment">Reply!</span> 
</button> 

CSS:

button .comment { display: none; } 
button:hover .replies { display: none; } 
button:hover .comment { display: inline; } 

Проверьте JsFiddle пример.Это прекрасно работает во всем, так как использует самые простые вещи для достижения одинаково основной цели.

Answer 5

Если кто-то хочет попробовать то же самое на меню ссылки (другой текст языка при наведении курсора мыши) вот jsfiddle example

HTML:

<a align="center" href="#"><span>kannada</span></a> 

CSS:

span { 
    font-size:12px; 
} 
a { 
    color:green; 
} 
a:hover span { 
    display:none; 
} 
a:hover:before { 
    color:red; 
    font-size:24px; 
    content:"ಕನ್ನಡ"; 
} 

Answer 6

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

<button> 
    <span class="replies">3 Replies</span> 
    <span class="comments"></span> 
<button> 

Оставьте второй один пустой, и в CSS, написать:

button{ 
    //your decorative code here } 

button:hover .replies{ 
    display: none; } 

button:hover .comments:before{ 
    content:"Reply!"; } 

Это похоже на первый ответ, но этот ответ не всегда работает с препроцессором как SASS или LESS.

Answer 7

Как просто, как это может быть:

$('.controls button.filter').hover(function(){ 

    var original = $('#current_filter').text(); 
    var descr = $(this).attr("title"); 

    $('#current_filter').html(descr); 

}, function() { 

    $('#current_filter').text(original); 
});