title: information on hover and multiple feature selection
body: <p>I'm working with OpenLayer 3.1.1, starting from this example: <a href="http://openlayers.org/en/v3.1.1/examples/vector-layer.html?q=hover" rel="nofollow">http://openlayers.org/en/v3.1.1/examples/vector-layer.html?q=hover</a>
  I would like show information on mouse hover and select multiple feature on click. Going to add the second feature to the selection it is selected twice. Why?</p>
  
  <pre><code>  var selectClick = new ol.interaction.Select({
    condition: ol.events.condition.click, 
    addCondition: ol.events.condition.shiftKeyOnly ,
    toggleCondition: ol.events.condition.never,
    removeCondition: ol.events.condition.altKeyOnly,
    });   
  
    select = selectClick;
    map.addInteraction(select);
  
  var highlightStyleCache = {};
  var featureOverlay = new ol.FeatureOverlay({
  map: map,
  style: function(feature, resolution) {
  var text = resolution &lt; 5000 ? feature.get('DIVISION') : '';
  if (!highlightStyleCache[text]) {
    highlightStyleCache[text] = [new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#f00',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.1)'
      }),
      text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        text: text,
        fill: new ol.style.Fill({
          color: '#000'
        }),
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 1
        })
      })
    })];
  }
  return highlightStyleCache[text];
  }
  });
  
  var highlight;
  var showCheckbox = document.getElementById('infoShow'); 
  
  var displayFeatureInfo = function(pixel) {
      var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
      return feature;         
      });
  
      if (showCheckbox.checked) { 
          if (feature) {
              if (feature.getKeys()=='geometry,COORDINATOR COUNTRY') {
              infoBox.innerHTML = '&lt;strong&gt;Coordinator Country: &lt;/strong&gt;' + feature.get('COORDINATOR COUNTRY')+ '&lt;br&gt;'+ '&lt;br&gt;';  
              } 
              else {
                  infoBox.innerHTML = '&lt;strong&gt;Area: &lt;/strong&gt;' + feature.get('AREA') + '&lt;br&gt;'+'&lt;strong&gt;Marine division: &lt;/strong&gt;' + feature.get('DIVISION');
              }   
              } else {
              infoBox.innerHTML = '&amp;nbsp;'+'&lt;br&gt;'+ '&lt;br&gt;';
          }  
      if (feature !== highlight) {            
          if (highlight) {
          featureOverlay.removeFeature(highlight);                
          }
          if (feature) {
          featureOverlay.addFeature(feature);             
          }
          highlight = feature;                
          } 
      }       
      };
  
      $(map.getViewport()).on('mousemove', function(evt) {
      var pixel = map.getEventPixel(evt.originalEvent);   
      displayFeatureInfo(pixel);
      });
  </code></pre>