我如何在Safari浏览器中应用CSS来显示背景颜色和悬停效果。

发布于 2025-01-22 13:59:10 字数 1352 浏览 4 评论 0原文

我无法弄清楚如何使用Safari浏览器解决此问题。注意所附的图像。一个镀铬，带有背景颜色的盒子，还有一个悬停效果，可行。（也在FF和IE中工作），Safari没有任何作用。没有悬停，背景只是白色，所以您看不到文字。这是该框的代码。我正在使用Safari版本的Chrome Dev工具来测试不同的CSS，但是我无法在包装盒中找到该背景进行更改，也无法悬停。关于如何攻击此问题的任何建议将不胜感激。

<ul>
<li class="acet-sum-item--clear"><a href="/applies/apples-tie-back-comments">
“Clear Filters”
::after
</a>
</li>

    .acet-sum-item--clear a {  
color: #fff;
    display: inline-block;
    text-align: center;
    border-radius: .15rem;
    background-color: #999;
    font-size: .65rem;
    padding: 0 1.5em;
    line-height: 1.3rem;
    font-weight: 400;
    border: none;
    margin: 0 .4rem 1rem .5rem;
    -webkit-appearance: button;
    cursor: pointer;
    margin-left: 0;
}

.acet-sum-item--clear a:hover    {
cursor: pointer;
    color: #fff;
    background-color: #20558a;
    text-decoration: none;
    border: none;
}

原文

i can not figure out how to address this issue with safari browser. Note the images attached. One Chrome, shows box with background color and there is also a hover effect, that works. (works in FF and IE as well), Nothing works in Safari. no hover, background just white, so you can't see the text. Here is the code of that box. I am using safari's version of chrome dev tools to test different css, but I can't get that background within the box to change and no hover is working. Any suggestions on how to attack this problem would be greatly appreciated.

<ul>
<li class="acet-sum-item--clear"><a href="/applies/apples-tie-back-comments">
“Clear Filters”
::after
</a>
</li>

    .acet-sum-item--clear a {  
color: #fff;
    display: inline-block;
    text-align: center;
    border-radius: .15rem;
    background-color: #999;
    font-size: .65rem;
    padding: 0 1.5em;
    line-height: 1.3rem;
    font-weight: 400;
    border: none;
    margin: 0 .4rem 1rem .5rem;
    -webkit-appearance: button;
    cursor: pointer;
    margin-left: 0;
}

.acet-sum-item--clear a:hover    {
cursor: pointer;
    color: #fff;
    background-color: #20558a;
    text-decoration: none;
    border: none;
}