javascript - 悬停/单击时更改内容

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
});;