按钮内的样式图标答案

【问题标题】：Styling icon inside button按钮内的样式图标
【发布时间】：2015-08-14 17:52:17
【问题描述】：

我有这样一段代码：

<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; 有关，但删除它会使图标离右上角更远。

其次：

如何仅当鼠标悬停在父按钮上时才显示我的图标？

【问题讨论】：

我认为您可以将右侧和顶部的css属性与位置：绝对。既然你使用了浮动，那么你可以结合css边距属性来使用它

标签： javascript html css angularjs angular-material

【解决方案1】：

以下代码应该可以工作：

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

【讨论】：

【解决方案2】：

这应该有效;)

.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;
}

【讨论】：