Change content on hover/click

Question

I have a client who wants a specific function on their website and I'm a bit stumped how to do it.

Basically, if you check out their existing site you can see 4 round buttons.

What they want is for when someone hovers (or clicks if using an iPad) over one of the buttons the line of text below, that currently says "Professional Sign Language Interpreting, Consultancy, and Logistics", changes to something else.

So for example, if they hover over the "Phone Us" button, "Professional Sign Language Interpreting, Consultancy, and Logistics" would change to "Call Us : +44(0) 999 999 9999"

What would be the best way to go about that?

Edit

I'm currently using this code that I found on another thread;

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

Which works fine.

Is there a way I can make it work on click OR hover and possibly fade in/out instead of just switching?

Any help would be most appreciated.

You can see this http://stackoverflow.com/questions/2554149/html-javascript-change-div-content — Navand, Apr 19 '13 at 10:03

score 3 · Answer 1 · answered Apr 19 '13 at 09:57

3

There are two jquery events for you: mouseenter and mouseleave

You can easly catch them and add/delete text where you want to. For example:

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

answered Apr 19 '13 at 09:57

Kasyx

3,170
21
32

score 3 · Answer 2 · answered Apr 19 '13 at 10:04

You can do something like this:

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/

So you store all the texts in the object and reference corrsponding message using data attributes.

For iPad you also have to handle the situation when use clicked a button and if then he clicks somewhere else so you have to toggle default text back.

score 0 · Answer 3 · edited Dec 10 '13 at 22:19

Add jQuery code for phone button hover as shown below in your jQuery code.

$(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 add hover function for other 3 buttons with specified Text to be displayed inside html() of $("div.homepage-content p").html("Call Us : +44(0) 999 999 9999");

Change content on hover/click

3 Answers3