html - 悬停时无法显示按钮

Question

我想在用户将鼠标悬停在特定按钮(设置)上时显示一组按钮，当用户将鼠标悬停在当前 div 元素上时我能够做到这一点隐藏特定按钮(设置)并显示其他按钮，

<div class="md-card container">
    <p matLine><b>{{message.artifactId}}</b></p>
    <p matLine>
        {{message.groupId}} &nbsp;&nbsp; {{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;
}

此代码适用于 div 元素，但我想将其更改为当用户将鼠标悬停在设置按钮上时将显示其余部分，因此我将代码更改为这样。

<div class="md-card container">
    <p matLine><b>{{message.artifactId}}</b></p>
    <p matLine>
        {{message.groupId}} &nbsp;&nbsp; {{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;
}

但是它没有用，我在这里犯的错误是什么？

编辑

我想最初显示设置按钮，当用户将鼠标悬停在设置按钮上时，它应该被隐藏，其他按钮应该是可见的，但是当用户最初将鼠标悬停在其他按钮上时，它不应该显示这些按钮。我当前的代码片段将在用户将鼠标悬停在设置或隐藏的任何按钮上时工作，它将显示按钮。

Answer 1

使用这个 css 就可以了

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

.settingsbtn:hover ~ .listbtn,.settingsbtn:hover + a .listbtn {
    opacity: 1;
}

.settingsbtn {
    opacity: 1;
    transition: opacity .35s ease;
}

.settingsbtn:hover {
    opacity: 0;
}

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

.settingsbtn:hover ~ .listbtn,.settingsbtn:hover + a .listbtn {
    opacity: 1;
}

.settingsbtn {
    opacity: 1;
    transition: opacity .35s ease;
}

.settingsbtn:hover {
    opacity: 0;
}

<div class="md-card container">
    <p matLine><b>{{message.artifactId}}</b></p>
    <p matLine>
        {{message.groupId}} &nbsp;&nbsp; {{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>