onHover纸卡聚合物

Question

你好吗？

我在一个使用聚合物的网站上工作，需要在纸卡上做onHover鼠标效果。这是我的密码：

<dom-module id="ingeview-projects">
  <template>
    <style include="app-grid-style">
    paper-card {
        --paper-card-header-color: var(--app-primary-color-light);
        width: 30%;
        min-width: 200px;
        margin: 5px;
      }
    </style>
    <ul class="app-grid">
      <li class="item">
        <template is="dom-repeat" items="[[projects]]" as="project" strip-whitespace>
          <paper-card image=[[project.metadata.image_url]] preload animated on-mouseover="onHover" on-mouseout="onUnhover">
            <div class="card-content">
              <h1>[[project.nombre]]</h1>
              [[project.descripcion]]
            </div>
            <shop-button>
              <a aria-label$="[[item.title]] Shop Now" href$="/list/[[item.name]]">Ver Más</a>
            </shop-button>
          </paper-card>
        </template>
      </li>
    </ul>
  </template>
<script>

    class IngeViewProjects extends Polymer.Element {
      static get is() { return 'ingeview-projects'; }

      onHover(e){
        console.log("E");
        //e.srcElement.classList.remove('hovered');
        e.srcElement.image="../images/Metro.png";
      }

      onUnhover(e){
        e.srcElement.image="../images/MetroBlack.png";
        console.log("A");
        //e.srcElement.classList.add('hovered');
      }

      static get properties() {
        return {
          projects: {
            type: Object,
          },
          user: {
            type: Object,
          }
        };
      }
    }

    window.customElements.define(IngeViewProjects.is, IngeViewProjects);
  </script>
</dom-module>

但是它不能正常工作，因为当跟踪卡内的鼠标时，悬停效果就会出现并消失。似乎悬停效应是检测卡中的图像和卡的另一部分之间的过渡。

你能告诉我怎么解决这个问题吗？

非常感谢

Answer 1

首先：

如果首先使用project.metadata.image_url设置图像，请尝试更改该变量。

  onHover(e){
    console.log("E");
    this.set('project.metadata.image_url', '../images/Metro.png';
  }

否则，我建议使用css来更改图像，而不是在代码中设置。

  paper-card {
    // other stylings
    --paper-card-header-image: "../images/MetroBlack.png";
  }

  paper-card:hover {
    --paper-card-header-image: "../images/Metro.png"
  }