按钮

Question

我有一段这样的代码：

<md-button ng-repeat="s in savedSearchName" 
           ng-click="loadSearch(s)" ng-right-click="removeFilter($event, s)"
           class="filterButton">
   {{s}}
   <md-icon md-svg-src='style/images/icons/ic_close_24px.svg' class="buttonRemover"
            title="Remove filter" ng-click="removeFilter($event, s)"
   </md-icon>
</md-button>

我正在尝试调整md-icon的大小并将其放在按钮的右上角。所以我有以下css：

.buttonRemover {
color: red;
position: relative;
width: 14px;
height: 14px;
right: -5px;
top : 0px;
float: right;
}

首先：

为什么我需要设置否定right？ （right: 0px并未将我的图标放在按钮的右边框旁边。我猜测它与float: right;有关，但删除它会使图标从右上角更远。

其次：

只有当鼠标悬停在父按钮上时，如何显示我的图标？

Answer 1

这应该有用;）

.filterButton {
     position:relative;
}

.filterButton:hover .buttonRemover {
    opacity:1;
}

.buttonRemover {
       color: red;
       position: absolute;
       width: 14px;
       height: 14px;
       right: 0px;
       top : 0px;
       opacity:0;
       transition:0.2s all linear;
}

Answer 2

以下代码应该有效：

.filterButton {
  position: relative;
}

.buttonRemover {
   // other styles
   position: absolute;
   top: 0;
   right: 0;
   display: none; // or visibility: hidden;
 }

.filterButton:hover .buttonRemover{
     display: block; // or visibility: visible
}