Question

将鼠标悬停在按钮上方时，我会闪烁

.button {
    color: #add8e6;
    border: 2px solid rgb(237, 125, 194);
    border-radius: 5px;
    padding: 18px 36px;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: inset 0 0 0 0 rgb(237, 125, 194);
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
  }
  
  .slide_right:hover {
    box-shadow: inset 400px 0 0 0 rgb(237, 125, 194);
  }

<!DOCTYPE html>

<html>
    <head>
        <title>Fashion Closet</title>
        <link href="/styles/styles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header class="header">
            <div class="container">
                <h1 class="header_title">Fashion Closet</h1>
                <h2 class="header_subtitle">Unique look for daily routine</h22>
            </div>
        </header>
        <div>
            <div class="actions">
                <div class="actions__container">
                    <input id="search-text" type="text" class="input" placeholder="Filter looks">
                    <select id="filter-by" class="dropdown">
                        <option value="byEdited">Sort by last edited</option>
                        <option value="byCreated">Sort by recently created</option>
                        <option value="alphabetical">Sort alphabetically</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="container">
            <div id="looks"></div>
            <button id="create-look" class="button slide_right">Create a new look</button>
        </div>
        <script src="/scripts/index-bundle.js"></script>
    </body>
</html>

如果在 .button 上添加 -webkit-backface-visibility：hidden; ，这会带有下划线，但无济于事。我还能尝试什么？

可能是我有一张图片作为背景吗？

Answer 1

因此，这是一个奇怪的错误，但是如果您设置box-shadow: inset 0 0 0 0.01px似乎可以解决。检查更多here。

我希望这是您想要的！

.button {
    color: #add8e6;
    border: 2px solid rgb(237, 125, 194);
    border-radius: 5px;
    padding: 18px 36px;
    display: inline-block;
    font-family: "Lucida Console", Monaco, monospace;
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    -webkit-transition: ease-out 0.4s;
    -moz-transition: ease-out 0.4s;
    transition: ease-out 0.4s;
    box-shadow: inset 0 0 0 0.01px rgb(237, 125, 194);
  }
  
  .slide_right:hover {
    box-shadow: inset 400px 0 0 0.01px rgb(237, 125, 194);
  }

<!DOCTYPE html>

<html>
    <head>
        <title>Fashion Closet</title>
        <link href="/styles/styles.css" rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <header class="header">
            <div class="container">
                <h1 class="header_title">Fashion Closet</h1>
                <h2 class="header_subtitle">Unique look for daily routine</h22>
            </div>
        </header>
        <div>
            <div class="actions">
                <div class="actions__container">
                    <input id="search-text" type="text" class="input" placeholder="Filter looks">
                    <select id="filter-by" class="dropdown">
                        <option value="byEdited">Sort by last edited</option>
                        <option value="byCreated">Sort by recently created</option>
                        <option value="alphabetical">Sort alphabetically</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="container">
            <div id="looks"></div>
            <button id="create-look" class="button slide_right">Create a new look</button>
        </div>
        <script src="/scripts/index-bundle.js"></script>
    </body>
</html>

如何通过将鼠标悬停在按钮上来消除闪烁？

1 个答案: