Hover effects for paper-dropdown

[IchordeDionysos]

Description

E.g. the paper-dropdown-menu especially the paper-input and iron-icon element should e.g. get a little bit opacity when hovered.

Expected outcome

The dropdown shouldn't have opacity, making it easy to see what elements are in the dropdown.

Actual outcome

The dropdown has opacity as well, making it hard to see what elements are in the dropdown.

Demo

<style is="custom-style">
    paper-dropdown-menu {
        opacity: 0.5;
        -webkit-transition: opacity 0.3s;
        -moz-transition: opacity 0.5s;
        -ms-transition: opacity 0.5s;
        -o-transition: opacity 0.5s;
        transition: opacity 0.3s;
        will-change: opacity;
    }
    paper-dropdown-menu:hover, paper-dropdown-menu:active {
        opacity: 1;
    }
</style>
<paper-dropdown-menu label="Dinosaurs">
  <paper-listbox slot="dropdown-content" selected="1">
    <paper-item>allosaurus</paper-item>
    <paper-item>brontosaurus</paper-item>
    <paper-item>carcharodontosaurus</paper-item>
    <paper-item>diplodocus</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Currently I think only this is possible.

[IchordeDionysos]

Live demo: https://jsfiddle.net/ojk7er8u/