CODEWITHSUNDEEP
csssvghoverrect
Nik Rawlins
Nik Rawlins

Reputation: 133

Svg hover rect change color

so I have this gigantic svg file that contains one tiny rectangle. I want this rectangle to change color when you hover over it. I cannot use onmouseover b/c that is java and this is for a school project and we were told we could only use html, html5, css and css3. I've been trying various things and I can't figure out why it won't work. I've only added the rectangle g container bit. And the style code I am using. I have tried adding this style code into the header, right after the svg starting tag thingy, into the g container, into the rect itself (without the style tag in this case). I can add the whole svg file but that thing is massive so I will only do this on request. 

 <g
     inkscape:groupmode="layer"
     id="layer12"
     inkscape:label="Hobitton Stadticon"
     style="display:inline"
     sodipodi:insensitive="true"
     >
     <style type="text/css">
 <![CDATA[
     .rect10023:hover {fill: #0000FF;}]]>
     </style>

       <rect
       style="fill:#DF0101;fill-opacity:1;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;"
       id="rect10023"
       width="8.2568808"
       height="6.880734"
       x="266.97247"
       y="201.43393" 
       />
    <text
       xml:space="preserve"
       style="font-size:40px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
       x="343.72607"
       y="-32.097607"
       id="text10025"
       sodipodi:linespacing="125%"
       transform="matrix(0.72346735,0.6903586,-0.6903586,0.72346735,0,0)"
       inkscape:transform-center-x="10.550459"
       inkscape:transform-center-y="-7.7981651"><tspan
         sodipodi:role="line"
         id="tspan10027"
         x="343.72607"
         y="-32.097607"
         style="font-size:14px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-family:Chiller;-inkscape-font-specification:Chiller">Hobbiton</tspan></text>
  </g>

Upvotes: 1

Views: 4033

Answers (2)

Danield
Danield

Reputation: 125433

1) The rect has an id - not a class, so use #rect10023:hover

2) You'll either need to remove the rect's fill from the inline style OR

you'll need to use fill: #0000FF!important; in your class

Upvotes: 5

Jake Rayson
Jake Rayson

Reputation: 921

It's because you have the fill of the rectangle defined with an inline style, and you are styling a class not an ID. Change the . to # and remove that fill:#DF0101; and the hover works.

Upvotes: 0

Related Questions