"svg:hover path" 仅处理最后一个 svg

Question

我想要一个响应式徽标，悬停时颜色会发生变化。

有 3 个版本的徽标通过媒体查询弹出和弹出，所有版本都需要相同的效果，但只有最后一个 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 到 "hide" 其他元素，不如尝试 display: none 您想要隐藏的元素，从而让您想要的徽标始终悬停在顶部.

"svg:hover path" 仅处理最后一个 svg

"svg:hover path" is only working on the last svg

html

css

svg

hover

responsive