famo.us 悬停不工作

Question

我真的很想解决这个问题。但似乎没有任何效果。

我正在尝试在页面顶部创建一个菜单，该菜单仅在悬停时可见。

目前非常简单的元素：

topViewSurf = new Surface({
    classes: ['topSplash'],
    properties: {
        backgroundColor: 'rgb(170,210,140)',
        boxShadow: '0px 0px 10px rgb(110,150, 90)'
    }
});
topViewMod = new Modifier({
    origin: [0.5, 0],
    size: [this.options.width, 40],
    transform: Transform.translate(0,-35,0)
});
this._add(topViewMod).add(topViewSurf);

然后我想调用这个函数，如果元素'topViewSurf'被悬停：

function dropTop(){
    topViewMod.setTransform(Transform.translate(0,0,1), 500);
}

由于某种原因，我无法让鼠标悬停工作。

我可以通过以下方式调用该函数：

topViewSurf.on("click", function(){
    dropTop()
});

工作得很好。但是，当我将 'click' 替换为 'hover' 时，单击或悬停该元素时没有任何反应。

我为此尝试了不同的方法，包括 jQuery 和纯 js，但似乎没有任何效果（我可能在那里犯了错误）但因为我无论如何都在问我想我会要求一个 famo.us 解决方案.

希望你能帮助我。 飞蛾

Answer 1

没有“悬停”事件。您应该使用“鼠标悬停”。

topViewSurf.on("mouseover", function(){
    dropTop()
});

希望这会有所帮助！

Answer 2

我对 famo.us 还很陌生，而且我刚刚完成了幻灯片教程。您可以从here 获取基本的源代码（没有悬停）。我还没有检查这个 repo，但它看起来很完整。

在教程结束后，我想做一个悬停效果来显示图像是可点击的。 我不确定我是否做得对，但以下内容对我有用：

1. 在文件SlideView.js 中单击事件后，在背景表面添加了悬停事件mouseover 和mouseout 的发射：

   background.on('mouseover', function() {
       this._eventOutput.emit('mouseover');
   }.bind(this));
   background.on('mouseout',   function() {
       this._eventOutput.emit('mouseout');
   }.bind(this));
   

2. 在SlideShowView.js 方法_createSlides 中，我在每张幻灯片中添加了以下代码：

   slide.on('mouseover', function(data) {
       this.hovered = true;
       this.showHoverEffect(); 
   }.bind(this));
   
   slide.on('mouseout', function(data) {
       this.hovered = false;
       this.showHoverEffect(); 
   }.bind(this));
   

3. 像这样在SlideshowView.js 中显示悬停效果：

   SlideshowView.prototype.showHoverEffect = function() {
       //console.log(this);
       var slide = this.slides[this.currentIndex];
       if ( this.hovered ) slide.hoverFadeIn();
       else slide.hoverFadeOut();
   };
   

4. 将悬停方法添加到SlideView.js：

   SlideView.prototype.hoverFadeIn = function() {
       this.hoverModifier.setOpacity(1, { duration: 500, curve: 'easeIn' });
   };
   
   SlideView.prototype.hoverFadeOut = function() {
       this.hoverModifier.halt();
       this.hoverModifier.setOpacity(0.0, { duration: 500, curve: 'easeIn' });
   };
   

5. 将要显示的元素添加到 SlideView.js 和 _createHover() 在 SlideView 构造函数中调用：

   function _createHover(){
           var hover = new Surface({
                      // undefined size will inherit size from parent modifier
                   properties: {
                       //backgroundColor: '#FFFFF5',
                       zIndex: 3,
                       boxShadow: '20px 20px 20px -5px rgba(0, 0, 255, 0.5)',
                       cursor: 'none',
                       // makes the surface invisible to clicks
                       pointerEvents: 'none'
                   }
           });
   
           var modifierObj = {
               origin: [0.5, 0],
               align: [0.5, 0],
               //transform: Transform.translate(0, this.options.filmBorder + this.options.photoBorder, 2),
               opacity: 0.0
           };
   
           this.hoverModifier = new StateModifier(modifierObj);
   
           this.mainNode.add(this.hoverModifier).add(hover);
   }
   

我将为此创建一个简单的 jsFiddle，但它还没有准备好。我希望我没有错过任何一部分，但我认为它应该是完整的，也许它可以帮助某人获得悬停效果。