0

我有一个客户想要在他们的网站上使用特定功能，但我有点难过如何做到这一点。

基本上，如果您查看他们现有的网站，您可以看到 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
});

哪个工作正常。

有没有办法让它在点击或悬停时工作，并可能淡入/淡出而不是仅仅切换？

非常感激任何的帮助。

4

3 回答 3

3

有两个 jquery 事件适合您：mouseenter和mouseleave

您可以轻松捕获它们并在您想要的位置添加/删除文本。例如：

$('element').mouseenter(function() {
    //do something
}).mouseleave(function() {
    //do something
});;
于 2013-04-19T09:57:56.127 回答
3

你可以这样做：

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/

因此，您将所有文本存储在对象中并使用数据属性引用相应的消息。

对于 iPad，您还必须处理使用单击按钮时的情况，如果随后他单击其他位置，则您必须将默认文本切换回。

于 2013-04-19T10:04:02.930 回答
0

为电话按钮添加 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");
  }
);

});

类似hover地为其他 3 个带有指定文本的按钮添加功能，以显示html()在$("div.homepage-content p").html("Call Us : +44(0) 999 999 9999");

于 2013-04-19T10:11:20.747 回答