Styling значок внутри кнопки

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

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

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

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