Jump to content

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


eaglehopes
Go to solution Solved by requinix,

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

 

 

 

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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>

 

  • Great Answer 1
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.