Change multiple div contents on another div mouse hover without css/with an xml source file

Question

I'm working on this site , and I need to change the contents of image_preview , title_preview , description_preview , link_preview according to what I'm hovering over (ex: mouse hover "button_a" = image1.png, iliketitle, ulikedesc, welikelink ).

I've tried using css solutions like this and this , but I wasn't able to make them work like I needed.

Since the page will have many button_# 's (50-100 buttons), I think css isn't a proper choice. So what I'm looking for is a way to do this without css , better if with an xml source file , so it'd be easier to manage the content to display for each button. I only found this talking about the xml I'd need, but I'm not sure that's exactly what I need.

Answer 1

Your buttons have a class (eg .btn ) and the associated data to each button is store somewhere, let's say each button has a data-* attribute which points to the right data.

$('.btn').hover(function() {
    var data = $(this).data('something');
    if(data == "b1") {
        //assign the values related to b1
    }
    else if(data == "b2") {
        //assign the values related to b2
    }
    //and so on
}

If you have a lot of buttons like that, then the data can be a reference to an array containing the proper info.

Here's a jsfiddle DEMO .

And here's updated DEMO .

EDIT:

.hover() can take two handler which the second will handle when mouse is out of the element.

yourElement.hover(
    function() {
        //mouse is on the element, do stuff
    },
    function() {
        //mouse is out, do other stuff
    }
);

You can have a function to set the default values and call that in hover's second function.

jsfiddle DEMO