javascript - 更改另一个 div 鼠标悬停上的多个 div 内容，无需 css/使用 xml 源文件

Question

我正在处理 this site ，我需要根据我的情况更改 image_preview、title_preview、description_preview、link_preview 的内容悬停在(例如:鼠标悬停 "button_a"= image1.png, iliketitle, ulikedesc, welikelink)。

我尝试过使用像this这样的CSS解决方案和 this ，但我无法让它们按我需要的方式工作。

由于页面将有许多 button_#(50-100 个按钮)，我认为 css 不是一个正确的选择。 所以我正在寻找一种不使用 css 的方法，如果使用 xml 源文件，效果会更好，这样管理要显示的内容会更容易对于每个按钮。我只找到this谈论我需要的 xml，但我不确定这正是我需要的。

Answer 1

您的按钮有一个类(例如.btn)，并且每个按钮的关联数据存储在某处，假设每个按钮都有一个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
}

如果您有很多这样的按钮，那么数据可以是对包含正确信息的数组的引用。

这是一个jsfiddle DEMO .

这是updated DEMO .

编辑:

.hover() 可以采用两个处理程序，当鼠标离开元素时，第二个处理程序将处理。

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

您可以使用一个函数来设置默认值并在悬停的第二个函数中调用该函数。

jsfiddle DEMO