Question

当我创建一个曲面并为其指定一个类时，CSS中定义的悬停不起作用。它似乎没有得到鼠标事件。我该如何打开它们。

    function _createSurface(content,color){
    return new Surface({   content: content,
                    size: [undefined, undefined],
                    classes:['select-button'],
                    properties: {
                        backgroundColor: "rgb(183, 232, 183)",
                        color: "rgb(51, 51, 51)",
                        fontSize:'10pt',
                        textAlign: 'center',
                        paddingTop:'2pt',
                        border: '1pt solid rgb(135, 192, 140)'
                    }
                });
}

以下是css中的类

    .select-button:hover {
border-color:rgb(49, 202, 155);
background-color: rgb(171, 237, 195);
    }

Answer 1

CSS

应该像下面的代码段一样工作。

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');

  var mainContext = Engine.createContext();

  var surface = new Surface({
    size: [undefined, 100],
    classes: ['my-surface'],
    content: 'Famo.us Hover'
  });

  mainContext.add(surface);
});
require(['main']);

.my-surface {
  font-size: 1em;
  border: 5px solid;
  border-color: rgb(49, 202, 155);
  background-color: rgb(171, 237, 195);
}
.my-surface:hover {
  font-size: 2em;
  border: 5px dotted;
  border-color: rgb(10, 10, 10);
  background-color: rgb(255, 0, 0);
}

<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Javascript（和jQuery）

使用涵盖大多数浏览器的解决方案。下面的代码段显示了使用jQuery hover方法的没有CSS的示例。

define('main', function(require, exports, module) {
  var Engine = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');

  var mainContext = Engine.createContext();

  var overProperties = {
    fontSize: '2em',
    border: '5px dotted',
    borderColor: 'rgb(10, 10, 10)',
    backgroundColor: 'rgb(255, 0, 0)'
  };
  var outProperties = {
    fontSize: '1em',
    border: '5px solid',
    borderColor: 'rgb(49, 202, 155)',
    backgroundColor: 'rgb(171, 237, 195)'
  };

  var surface = new Surface({
    size: [undefined, 100],
    content: 'Famo.us Hover',
    properties: outProperties,
    attributes: {
      id: 'mySurface'
    }
  });

  function _attachHover() {
    var thisSurface = this;

    $("#mySurface").hover(
      function(event) {
        // The mouse has entered the element
        thisSurface.setProperties(overProperties);
      },
      function(event) {
        // The mouse has left the element
        thisSurface.setProperties(outProperties);
      }
    );
  }

  surface.on('deploy', _attachHover);

  mainContext.add(surface);
});
require(['main']);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://requirejs.org/docs/release/2.1.16/minified/require.js"></script>
<script src="http://code.famo.us/lib/requestAnimationFrame.js"></script>
<script src="http://code.famo.us/lib/classList.js"></script>
<script src="http://code.famo.us/lib/functionPrototypeBind.js"></script>

<link rel="stylesheet" type="text/css" href="http://code.famo.us/famous/0.3.5/famous.css" />

<script src="http://code.famo.us/famous/0.3.5/famous.min.js"></script>

Answer 2

更新。我无法使用CSS，但下一个最好的事情是使用mouseover mouseout事件进行表面处理。注意：在更新DOM的事件中执行s.setClasses（[..]）但表面没有重新绘制。

以下事件有效。

 function _createSurface(content,color){
    var s =  new Surface({   content: content,
                    size: [undefined, undefined],
                    classes:['select-button'],
                    properties: {
                        backgroundColor: "rgb(183, 232, 183)",
                        color: "rgb(51, 51, 51)",
                        fontSize:'10pt',
                        textAlign: 'center',
                        paddingTop:'2pt',
                        border: '1pt solid rgb(135, 192, 140)'
                    }
                });

    s.on('mouseover',function(e){
        this.setProperties({ backgroundColor: 'rgb(171, 237, 195)',
                             borderColor:'rgb(49, 202, 155)'});

    });

    s.on('mouseout',function(e){
        this.setProperties({ backgroundColor: 'rgb(183, 232, 183)',
                             borderColor:'rgb(135, 192, 140)'});
    });



    s.pipe(this);
    return s;
}

如何在famo.us表面上触发CSS悬停？

2 个答案:

CSS

Javascript（和jQuery）