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

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

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

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

Ответ 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/

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

Ответ 2

Я думаю, что это был бы простой способ пойти на это. Используйте два пролета внутри вашей кнопки, один с контентом "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. Это прекрасно работает во всем, так как использует очень простые вещи для достижения одинаково основной цели.

Ответ 3

$('#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');
            }
        });
    }
);

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

Ответ 4

Я бы использовал комбинацию 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);
    });

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

Ответ 5

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

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:"ಕನ್ನಡ";
}

Ответ 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.

Ответ 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);
});