Question

聚合物元素为网页添加了一些很酷的材料设计。使用聚合物时，我无法添加：悬停或：聚焦或此类选择器到纸卡元素。

<style is="custom-style">
    paper-card{
        min-width: 33vw;

        --paper-card: {
             background-color: transparent;
         };

        --paper-card-header: {
             background-color: rgba(255, 255, 255, 1);
         }

        --paper-card-content: {
             background-color: rgba(255, 255, 255, 0.5);
         };
    }

    paper-card:hover{
        --paper-card-content: {
            background-color: rgba(255, 255, 255, 1);
         };
    }
</style>

以上内容：悬停选择无效。 Check this plunker

还有其他聚合物元素，如纸张按钮，其中：悬停状态正常工作。是否还有其他适用的方法：选择聚合物混合物？

如何制作：悬停选择？这个问题有解决方法吗？（如果仅在没有JS的CSS中会更好）

Answer 1

例如你可以这样做

--paper-card:hover {
         background-color: transparent;
     };

或

--paper-card: {
         background-color: transparent;
         transition: color 2s;
     };
paper-card:hover {
    color: red;
}

Answer 2

HTML

＆＃13;

.row {
    position: relative;
  }

  .hover-btn {
     position: absolute;
     right: 15px;
     display: none;
  }

  .row:hover .hover-btn {
     display: block;
  }

＆＃13;

<div class="row">
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="col-md-4">
       Content
   </div>
   <div class="hover-btn">
     <button type="button" class="close" data-dismiss="alert">
        <span aria-hidden="true">×</span>
        <span class="sr-only">Close</span>
     </button>
  </div>
</div>

＆＃13;

https://stackoverflow.com/a/26636329

如何使用以下方式对纸质卡进行样式化：悬停，：活动状态

2 个答案: