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

然后我想调用这个函数，如果Element＆＃39; topViewSurf＆＃39;徘徊：

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

出于某种原因，虽然我无法上班。

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

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

完美无缺。但是当我更换“点击”时与＆＃39;悬停＆＃39;单击或悬停元素时没有任何反应。

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

希望你能帮助我。 spitterfly

Answer 1

没有＆＃39;悬停＆＃39;事件..你应该使用＆＃39; mouseover＆＃39;。

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

希望这有帮助！

Answer 2

我是famo.us的新手，我刚刚完成了幻灯片教程。您可以从here获取基本的源代码（没有悬停）。我没有检查过这个回购，但似乎已经完成了。

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

在文件mouseover中的点击事件后，在背景曲面添加了悬停事件mouseout和SlideView.js的发布：

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

在方法SlideShowView.js的{{1}}中，我已在每张幻灯片中添加了以下代码：
```
_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));内显示悬停效果，如下所示：
```
SlideshowView.js
```
将悬停方法添加到SlideshowView.prototype.showHoverEffect = function() { //console.log(this); var slide = this.slides[this.currentIndex]; if ( this.hovered ) slide.hoverFadeIn(); else slide.hoverFadeOut(); };：
```
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' }); };和SlideView.js的elemet可以在SlideView构造函数中调用：
```
_createHover()
```

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

famo.us悬停不起作用

2 个答案: