How to change style when hover over div inside svg element?

[eaglehopes]

I am trying to reach the div element having inside-svg classname  inside an svg element (I put it as foreignObject) but no success. My sample code is like :

<style>
  .sv {
    
    stroke:#aa1111;
    border-radius:20px;
    border-width:2px;
    border-color:#ccc;
    box-shadow:2px 2px darkgray;
    background-blend-mode: normal;
  }

  .sv:hover  {
     background-color: #ccffcc;
    fill:black;
    width :
    border-width:2px;
    border-color:red;
    background-blend-mode: difference;
    /*filter: blur(0.5px) grayscale(2%);*/
  }

  .sv:hover:has(.inside-svg) {
    background-color:red;
    color:black;
  }

</style>


<svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg"

>

  <circle 
      x="0" y="0" 
      cx="120" cy="-20" r="150" 
      style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0"
      />
  
  <text x="50" y="160"
  font-size="20px"
  font-family="monospace" 
  font-style="italic"
  >
  TRIAL
    <tspan x="10" y="185">BANNER</tspan> 
  </text>
  <circle 
      x="20" y="200" 
      cx="10" cy="480" r="250" 
      style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0"
      />
  <circle 
      x="60" y="230" 
      cx="40" cy="460" r="250" 
      style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0"
      />
  <foreignObject x="10" y="290" width="100%" height="100%">
    <!--
      In the context of SVG embedded in an HTML document, the XHTML 
      namespace could be omitted, but it is mandatory in the 
      context of an SVG document
    -->
    <div class="inside-svg" style="width:92%;word-break:break;color:white">
      having a div inside the svg might be the only way to do this correctly, time permitting
    </div>
  </foreignObject>
</svg>

How can I reach div inside svg and change its foreground color to black? Thanks.

[requinix]

Works for me, provided that I'm not using Firefox and that I think the desired behavior is to change the background color of the SVG to red.

If you're trying to change the background color of the .inside-svg element then you've vastly over-thought this...

[eaglehopes]

16 hours ago, requinix said:

Works for me, provided that I'm not using Firefox and that I think the desired behavior is to change the background color of the SVG to red.

If you're trying to change the background color of the .inside-svg element then you've vastly over-thought this...

Thanks requinix for answer. Actually I was learning svg coding and I used

https://editsvgcode.com/

page to try my code and did not work. I tried it in my own browserr, both worked... So I think the problem is due to online svg editor.

[Barand]

This works with Firefox

<script type='text/javascript'>
    $(function() {
        $(".circ3").mouseover(function() {
            $(this).css("fill", "red")
            $(this).css("fill-opacity", "1")
            $("#grp1").removeClass('txt1').addClass('txt2')
        })
        $(".circ3").mouseout(function() {
            $(this).css("fill", "blue")
            $(this).css("fill-opacity", "0.3")
            $("#grp1").removeClass('txt2').addClass('txt1')
        })
    })
</script>

 

<style type='text/css'>
  .sv {
    
    stroke:#aa1111;
    border-radius:20px;
    border-width:2px;
    border-color:#ccc;
    box-shadow:2px 2px darkgray;
    background-blend-mode: normal;
  }

  .sv:hover  {
     background-color: #ccffcc;
    fill:black;
    width :
    border-width:2px;
    border-color:red;
    background-blend-mode: difference;
    /*filter: blur(0.5px) grayscale(2%);*/
  }
  .txt1 {
      fill: white;
  }
  .txt2 {
      fill: black;
  }
</style>

 

    <svg class="sv" width="200" height="400" xmlns="http://www.w3.org/2000/svg">

      <circle 
          x="0" y="0" 
          cx="120" cy="-20" r="150" 
          style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0"
          />
      
      <text x="50" y="160"
          font-size="20px"
          font-family="monospace" 
          font-style="italic">
          TRIAL <tspan x="10" y="185">BANNER</tspan> 
      </text>
      <circle 
          x="20" y="200" 
          cx="10" cy="480" r="250" 
          style="fill:darkgreen;fill-opacity:0.8;stroke:darkgreen;stroke-width:0"
          />
      <circle 
          x="60" y="230" 
          cx="40" cy="460" r="250" 
          style="fill:blue;fill-opacity:.3;stroke:blue;stroke-width:0"
          class='circ3'
          />
          <g id='grp1' class='txt1'>
            <!--
              In the context of SVG embedded in an HTML document, the XHTML 
              namespace could be omitted, but it is mandatory in the 
              context of an SVG document
            -->
            
              <text x='10' y='310' >having a div inside the</text>
              <text x='10' y='330' >svg might be the only</text> 
              <text x='10' y='350' >way to do this correctly,</text>
              <text x='10' y='370' >time permitting</text>
          </g>
    </svg>

 

 

 

 

[eaglehopes]

Thanks Barand, it worked too. But since I am learning javascript too, if you do not mind, can you explain a little bit about the "$" sign in javascript? What is the function of it?

[Barand]

JQuery

It makes life a lot easier when using javascript.

<script type='text/javascript'>
    $(function() {
        $(".circ3").mouseover(function() {                   // handle mouseover event on elements with class "circ3"
            $(this).css("fill", "red")                       //    $(this) is the target element - change its fill color
            $(this).css("fill-opacity", "1")                 //                                  - change its opacity
            $("#grp1").removeClass('txt1').addClass('txt2')  // change class of element with id = "grp1"
        })
        $(".circ3").mouseout(function() {
            $(this).css("fill", "blue")
            $(this).css("fill-opacity", "0.3")
            $("#grp1").removeClass('txt2').addClass('txt1')
        })
    })
</script>