Question

当用户将鼠标悬停在特定按钮（设置）上时，我想显示一组按钮，当用户将鼠标悬停在当前div元素上时，我可以隐藏特定按钮（设置）并显示其他按钮，< / p>

CSS

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

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

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

.container:hover .listbtn {
    opacity: 1;
}

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

.container:hover .settingsbtn {
    opacity: 0;
}

CSS

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

但它不起作用，我在这里犯的错误是什么？

修改

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

Answer 1

你的代码工作正常，这是你想要的吗？

.listbtn {
    opacity: 0;
    transition: opacity .35s ease;
}

.sd .settingsbtn:hover ~ .listbtn {
    opacity: 1;
}

.settingsbtn {
    opacity: 1;
    transition: opacity .35s ease;
}

.sd .settingsbtn:hover {
    opacity: 0;
}

<span class="sd">
<button type="submit" class="btn btn-danger pull-right settingsbtn">
<i class="material-icons">settings</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">content_paste</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">refresh</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">delete</i>
</button>
<button type="submit" class="btn btn-danger pull-right listbtn">
<i class="material-icons">mode_edit</i>
</button>
</span>

Answer 2

使用此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>

在悬停时无法显示按钮

2 个答案: