My goal is to have a set of buttons displayed when the user hovers over a specific button (Settings). I managed to achieve this by hiding the Settings button when the user hovers over the current div element and showing the other buttons instead.
<div class="md-card container">
<p matLine><b>{{message.artifactId}}</b></p>
<p matLine>
{{message.groupId}} {{message.version}}
<button type="submit" class="btn btn-danger pull-right settingsbtn">
<i class="material-icons">settings</i>
</button>
<a routerLink="/baseline-errors/{{message.id}}">
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">content_paste</i>
</button>
</a>
<button *ngIf="isScanning" type="submit" class="btn btn-danger pull-right spaceTest listbtn"
(click)="rescanBaseline(message)">
<i class="material-icons">refresh</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn"
(click)="deleteBaseline(message)">
<i class="material-icons">delete</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn"
(click)="editBaseline(message)"><i
class="material-icons">mode_edit</i>
</button>
</p>
<mat-divider></mat-divider>
</div>
CSS
.listbtn {
opacity: 0;
transition: opacity .35s ease;
}
.container:hover .listbtn {
opacity: 1;
}
.settingsbtn {
opacity: 1;
transition: opacity .35s ease;
}
.container:hover .settingsbtn {
opacity: 0;
}
The above code works as expected for the entire div element, but my goal now is to hide the Settings button and show the other buttons when the user hovers over it. I modified the code as follows:
<div class="md-card container">
<p matLine><b>{{message.artifactId}}</b></p>
<p matLine>
{{message.groupId}} {{message.version}}
<span class="sd">
<button type="submit" class="btn btn-danger pull-right settingsbtn">
<i class="material-icons">settings</i>
</button>
<a routerLink="/baseline-errors/{{message.id}}">
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">content_paste</i>
</button>
</a>
<button *ngIf="isScanning" type="submit" class="btn btn-danger pull-right spaceTest listbtn"
(click)="rescanBaseline(message)">
<i class="material-icons">refresh</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn"
(click)="deleteBaseline(message)">
<i class="material-icons">delete</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn"
(click)="editBaseline(message)"><i
class="material-icons">mode_edit</i>
</button>
</span>
</p>
<mat-divider></mat-divider>
</div>
CSS
.listbtn {
opacity: 0;
transition: opacity .35s ease;
}
.sd:hover .listbtn {
opacity: 1;
}
.settingsbtn {
opacity: 1;
transition: opacity .35s ease;
}
.sd:hover .settingsbtn {
opacity: 0;
}
Unfortunately, this modification did not produce the desired outcome. What am I missing in my approach?
EDIT
I intend to have the Settings button visible initially, and upon hovering over it, it should be hidden while displaying the other buttons. However, if the user hovers over the other buttons initially, they should remain invisible. The current code snippet results in displaying all buttons upon hovering over any button, which is not the desired behavior.