title: Propagate hover event in ember
body: <p>I have a list and I want to detect when the user hovers over an li within it. Problem is mouseEnter doesn't seem to propagate. At the moment I'm resorting to using this:</p>
  <pre><code>// components/hover-pad.js
  export default Ember.Component.extend({
      template: Em.Handlebars.compile('{{yield}}'),
  
      mouseEnter: function(){
          this.sendAction(&quot;action&quot;, this.get(&quot;ctx&quot;));
      },
  
      action: function(){
          return &quot;hover&quot;;
      }.property()
  });
  
  // components/project-picker.js
  export default Ember.Component.extend({
      actions: {
          hover: function(ctx){
              console.log(&quot;caught propagated hover&quot;);
          }
      }
  })
  
  // templates/components/project-picker/hbs
  &lt;ul&gt;
      {{#each project in projects}}
      &lt;li&gt;{{#hover-pad ctx=&quot;project&quot;}}&lt;/li&gt;
      {{/each}}
  &lt;/ul&gt;
  </code></pre>
  <p>This works but I really feel like I'm missing some ember enlightenment, what would a more idiomatic may to do it?</p>
  <h2>Update</h2>
  <p>I should also mention that I want to capture clicks in addition to the hover event which means that it's not possible to use the action helper.</p>