Rob Halford Rob Halford - 2 months ago 9
CSS Question

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

I'm trying to have a responsive logo, that on hover the colour changes.

There are three versions of the logo which pop in and out with media queries, all that need the same effect, but only the last svg works

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;}}




thank you in advance!

Answer

Here you will find a working pen as well, be sure to set a @media for the largest screens as well.

Instead of using opacity to "hide" the others, try display: none on the elements you want to hide, thus allowing the logo you want to always be present hoverable and on top.

Comments