0

https://jsfiddle.net/dr1vfymn/

I have an svg element with two boxes and I'm trying to change the fill color of one when the mouse hovers over it:

#room1:hover {
  fill: #ffcccb;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
     <rect id="room1" x="0.5" y="0.5" width="93" height="99" style="fill:#fff"/>
     <path d="M128,44v98H36V44h92m1-1H35V143h94V43Z" transform="translate(-35 -43)"/>
     <rect id="room2" x="93.5" y="0.5" width="56" height="99" style="fill:#fff"/>
     <path d="M184,44v98H129V44h55m1-1H128V143h57V43Z" transform="translate(-35 -43)"/>
    </svg>

However it is not working at all. What could be the reason?

j08691
  • 204,283
  • 31
  • 260
  • 272
Jebathon
  • 4,310
  • 14
  • 57
  • 108

1 Answers1

0

Because your inline CSS is overriding it. One way to overcome that is to use !important

#room1:hover {
  fill: #ffcccb !important;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
     <rect id="room1" x="0.5" y="0.5" width="93" height="99" style="fill:#fff"/>
     <path d="M128,44v98H36V44h92m1-1H35V143h94V43Z" transform="translate(-35 -43)"/>
     <rect id="room2" x="93.5" y="0.5" width="56" height="99" style="fill:#fff"/>
     <path d="M184,44v98H129V44h55m1-1H128V143h57V43Z" transform="translate(-35 -43)"/>
    </svg>

Note that using !important is typically frowned upon so don't rely on inline styling:

#room1:hover {
  fill: #ffcccb;
}

#room1,
#room2 {
  fill: #fff;
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100">
     <rect id="room1" x="0.5" y="0.5" width="93" height="99" />
     <path d="M128,44v98H36V44h92m1-1H35V143h94V43Z" transform="translate(-35 -43)"/>
     <rect id="room2" x="93.5" y="0.5" width="56" height="99"/>
     <path d="M184,44v98H129V44h55m1-1H128V143h57V43Z" transform="translate(-35 -43)"/>
    </svg>
j08691
  • 204,283
  • 31
  • 260
  • 272