Question

要求：在悬停时将背景图像更改为新图像。

我有4张图片，我希望每次悬停时都要在背景中显示新图像。

这个特殊的东西没有流星，但没有流星。我是新的它真的很无能为力。

<body>
    <a href="#" id="yes" class="btn btn-primary">Yes</a>
    <a href="#" id="no" class="btn btn-danger">No</a>
</body>

的Javascript

Template.body.events({
    "mouseover #no": function(){
        console.log ("mouseover success");
        var imgs=['http://www.gstatic.com/webp/gallery/1.jpg','http://www.gstatic.com/webp/gallery/2.jpg','http://www.gstatic.com/webp/gallery/3.jpg','https://www.gstatic.com/webp/gallery3/1.png'];
        var current = imgs.indexOf($('body').css('background-image'));
        $('body').css('background-image',imgs[++current] || imgs[0]);
    }
})

Answer 1

您可以尝试使用mouseenter而不是mouseover。请参阅活动文档here以查看支持的活动。

"mouseenter #no": function(){

Answer 2

呼！你的代码不是“流星般的”。我强烈建议您查看更多教程，并了解Meteor中通常的结构。你用来操纵DOM的jQuery越少越好（虽然在这种情况下改变样式并不是什么大问题）。但是，请尝试这样做:(此代码未经测试）

Template.body.onCreated(function () {
  Session.set('images', 
    [
      'http://www.gstatic.com/webp/gallery/1.jpg',
      'http://www.gstatic.com/webp/gallery/2.jpg', 
      'http://www.gstatic.com/webp/gallery/3.jpg', 
      'https://www.gstatic.com/webp/gallery3/1.png'
    ]);
  Session.set('currImage', 0);
});

Template.body.events({
  "mouseover #no": function () {
    var imgs = Session.get('images');

    Session.set('currImage', Session.get('currImage') + 1);

    Template.instance().$('body').css('background-image',
      imgs[Session.get('currImage')] || imgs[0]);
  }
});

这也很快而且很脏。我可能不会在这里使用Session，我当然也不会在body中转储所有内容，你应该使用模板。

Meteor Jquery事件在悬停时更改为新的背景图像

2 个答案: