0

When I create a surface and assign it a class the hover defined in CSS is not working. It doesn't seem to get the mouse events. How do I turn them on.

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

Below is the class in the css

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

2 Answers2

1

CSS

Should work as the snippet below shows.

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 (and jQuery)

Use a solution that covers most browsers. The snippet below shows an example without CSS using jQuery hover method.

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>
talves
  • 13,993
  • 5
  • 40
  • 63
  • 1
    thanks for that. that's how I thought it should work. My surface is in side a gridLayout inside a HeaderFooterLayout. Maybe something else is going on. Nice example with jquery. I'm sure that will come in handy. – Omar Masri Apr 18 '15 at 21:32
0

Update. I couldn't get it working with CSS, but the next best thing is to use the mouseover mouseout events for the surface. NOTE: doing s.setClasses([..]) in the event updated the DOM but the surface didn't repaint.

The events below worked.

 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;
}
Omar Masri
  • 81
  • 4