按钮内的样式图标

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 的大小并将其放在按钮的右上角。所以我有 folowwing 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
}

按钮内的样式图标

Styling icon inside button

html

javascript

css

angularjs

angular-material