"svg:hover path" 仅适用于最后一个 svg

Question

我正在尝试使用响应式徽标，悬停时颜色会发生变化。

标志的三个版本通过媒体查询弹出和弹出，都需要相同的效果，但只有最后一个 svg 有效

HTML：

<section class="welcome">

        <span id="slide">

            <svg id="RH1" data-name="RH1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 158.3">...</svg>

            <svg id="RH2" data-name="RH2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.2 143">...</svg>

            <svg id="RH3" data-name="RH3" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 143.9">...</svg>

        </span>

</section>

CSS：

svg {
    width:600px;
    height:115px;
    position:fixed;
    top:calc(50% - 50px);
    left:50%;
    margin-top:-56.5px;
    margin-left:-300px;
    cursor:pointer;
    fill:#3c9fd9;
}

svg:hover path {
    fill:#fff !important;
}

#RH2, #RH3 {opacity:0;}

@media only screen and (max-width:1100px) {#RH1, #RH3 {opacity:0;}#RH2 {opacity:1;}}
@media only screen and (max-width:570px) {#RH1, #RH2 {opacity:0;}#RH3 {opacity:1;}}

• https://codepen.io/robhalford92/pen/BLRQdd

提前谢谢你！

Answer 1

在这里您可以找到working pen as well。

不要使用opacity 来“隐藏”其他元素，而是在要隐藏的元素上尝试display: none，从而使您想要的徽标始终可以悬停在顶部。