Изменить содержимое при наведении/клике

Question

У меня есть клиент, который хочет использовать определенную функцию на своем веб-сайте, и я немного тупик, как это сделать.

В принципе, если вы посмотрите их existing site, вы можете увидеть 4 круглых кнопки.

Что они хотят, когда кто-то наводил (или щелкает при использовании iPad) на одну из кнопок строку текста ниже, в которой в настоящее время говорится «Профессиональный язык перевода, консультации и логистика», изменения в чем-то еще ,

Так, например, если они парят над кнопкой «Телефон с нами», «Профессиональный язык жестов Устный, консультирование, и материально-технического обеспечения» изменится на «Позвоните нам: +44 (0) 999 999 9999»

Какой был бы лучший способ сделать это?

Редактировать

В настоящее время я использую этот код, который я нашел в другом потоке;

$('.button').bind('hover', function() { 
    // suppose <a id='about' class='menu'> tag 
    $('p.tagline').hide(); // hide all texts 
    $('#tag-' + this.id).show(); // show the one with id=text-about 
}); 

Что работает нормально.

Есть ли способ, которым я могу заставить его работать с кликом ИЛИ наведите курсор и, возможно, затухайте в/из вместо того, чтобы просто переключаться?

Любая помощь была бы очень признательна.

Answer 1

Есть два JQuery события для вас: mouseenter и mouseleave

Вы можете Ис поймать их и добавлять/удалять текст, где вы хотите. Например:

$('element').mouseenter(function() { 
    //do something 
}).mouseleave(function() { 
    //do something 
});; 

Answer 2

Вы можете сделать что-то вроде этого:

var texts = { 
    default: 'Professional Sign Language Interpreting, Consultancy, and Logistics', 
    email: 'Email text', 
    phone: 'Call us +11111111111', 
    twitter: 'Twitter adfa df asd', 
    about: 'About us text here' 
}, 

$text = $('.content p'); 
$('.button').on('mouseover click', function() { 
    $text.text(texts[$(this).data('class')]); 
}) 
.on('mouseout', function() { 
    $text.text(texts.default); 
}); 

http://jsfiddle.net/NJvFP/

Так вы храните все тексты в объекте и эталонного corrsponding сообщения с использованием атрибутов данных.

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

Answer 3

Добавить код jQuery для телефона hover, как показано ниже, в вашем коде jQuery.

$(document).ready(function(){ 

$("div.phone").hover(
    function() { 
    $("div.homepage-content p").html("Call Us : +44(0) 999 999 9999"); 
    }, 
    function() { 
    $("div.homepage-content p").html("Professional Sign Language Interpreting, Consultancy, and Logistics"); 
    } 
); 

}); 

Similary добавить hover функции для других 3 кнопок с указанным текстом, который будет отображаться в html() из $("div.homepage-content p").html("Call Us : +44(0) 999 999 9999");