mdOption: ripple blocks hover styles and events on parent's child

[epelc]

Bug, feature request, or proposal:

If you have a ripple on a component and add a child inside that component, the child can not have hover events or styles applied to it directly(you must apply to the parent). This is because the ripple is position: absolute; when it is not active(not doing the animation) and it covers the entire parent.

What is the expected behavior?

Ripples should allow hover effects and event listeners to work on a parents child without css/js hacks and workarounds.

What is the current behavior?

The ripple blocks this because of it's styles when it is not active.

What are the steps to reproduce?

I believe this can be triggered with any ripple but I specifically encountered it with a custom md-option that had a component inside which listens for hover events. This also happens when trying to apply css affects.

Providing a Plunker (or similar) is the best way to get the team to see your issue.
Plunker template: https://goo.gl/DlHd6U

See this.
http://plnkr.co/edit/0Dh65stBoG1v2VEAjvE5?p=preview

What is the use-case or motivation for changing an existing behavior?

For me: showing user panels on hover without special overrides to attatch event listeners to a parent if the ripple is a sibling.

For everyone else: in general I think you'd run into this pretty easily. I also don't believe this bug is in Material for AngularJS, so anyone upgrading(like me) would be in trouble.

Which versions of Angular, Material, OS, browsers are affected?

Angular: 4.1.1
Material: Beta 3
Browser: Chrome 58
OS: macOS 10.12.4

Is there anything else we should know?

[epelc]

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}