Question

我有一个带圆角的 div。当鼠标在div上方时，角需要是正确的。我该怎么做？

这是我目前所写的：

<style>
    #ex1
    {
        border: 2px outset black;
        border-radius: 25px;
        padding: 10px;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

</style>

<style>
    #ex1:hover
    {
        border-style: solid;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

Answer 1

您也不需要为悬停再次重复相同的样式。您只需要在悬停样式中添加您想看到的更改。

#ex1:hover
{
    border-style: solid;
    border-radius: 0px;
}

Answer 2

正如克雷格发布的：

<style>
    #ex1 {
        border: 2px outset black;
        border-radius: 25px;
        padding: 10px;
        background-color: transparent;
        text-align: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    #ex1:hover {
        border-style: solid;
        border-radius: 0;
    }
</style>

html : 悬停在 div 边框样式上

2 个答案: