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" 
    }