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

Answer 2

您可以这样做：

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，您还必须在使用时点击按钮处理这种情况，然后他点击其他地方，这样您就必须切换回默认文本。

Answer 3

添加电话按钮hover的jQuery代码，如下面的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");
  }
);

});

类似地为其他3个按钮添加hover功能，并在html()的{{1}}内显示指定的文字

在悬停/点击时更改内容

3 个答案: