У меня есть система комментариев, и у каждого комментария есть кнопка, которая обычно отображает количество ответов на нее. Я хочу, чтобы при наведении курсора на кнопку текст менялся с "3 ответов" на "Ответить!", А затем, когда мышь покидает кнопку, текст возвращается к "3 ответам".
Поскольку количество ответов зависит от каждого комментария, я не могу сделать простой mouseover/mouseout script. Один из способов обойти это - передать количество ответов в виде переменной и сделать небольшую функцию, чтобы позаботиться об этом. Но должен быть более простой способ. Я попытался использовать: hover вещь в css, чтобы изменить содержимое тега (с содержимым свойства css), но пока не удался.
Любая помощь оценивается, спасибо!
Да, вы можете использовать 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:
Изменить: это работает в IE8, но не в режиме совместимости, поэтому я предполагаю, что IE7 отсутствует. Будет ли это проблемой?
Я думаю, что это был бы простой способ пойти на это. Используйте два пролета внутри вашей кнопки, один с контентом "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. Это прекрасно работает во всем, так как использует очень простые вещи для достижения одинаково основной цели.
$('#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 своим идентификатором комментария, и он возвращает # ответов для этого комментария. Вы можете решить, как вы хотите сохранить/получить свой комментарий.
Я бы использовал комбинацию jQuery . hover() и jQuery .data():
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: не стесняйтесь реорганизовывать анонимную функцию, используемую в качестве двух обратных вызовов для зависания, поскольку они точно такие же:)
Если кто-то хочет попробовать то же самое по ссылкам меню, (текст на другом языке при наведении) здесь пример 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:"ಕನ್ನಡ";
}
Другой способ сделать это - создать два пролета с кнопкой и иметь классы для каждого диапазона.
<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.
Насколько это возможно:
$('.controls button.filter').hover(function(){
var original = $('#current_filter').text();
var descr = $(this).attr("title");
$('#current_filter').html( descr );
}, function() {
$('#current_filter').text(original);
});