How to disable a hover style in .css file by using <style> tag?-CodePudding

I am using a document generator called Docfx and it contains own css file. One of the entry in it is,

svg:hover path {
    fill: #ffffff;
}

I do not want any change in style when I hover on svg, so I want to disable this. Since I do not have access to modify this css file, only option I have is to use <style>.

I tested <style> approach by changing the fill color and it worked. Now, I am not able to figure out how to disable this fill.

<style>
  svg:hover path {
    <!--fill: #AAAfff;-->
  }
</style>

Note: I can also add jquery scripts so if there is a solution based on that, I can use it as well.

CodePudding user response：

fill:none is not good solution. If you use this, all the styles disappear The style before Hover too.
So I found it on the link below. How about writing ':not'?

<style>
  svg:not:hover path {
    fill: #ffffff;
  }
</style>

I referred to this link: https://stackoverflow.com/a/40106010/18055787

↓ Forget the answer above. Below is a proven solution ↓

HTML
Add Jquery and The path tag is the child element of the svg tag

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
  <svg height="210" width="400" >
    <path fill="#AB7C94" d="M150 0 L75 200 L225 200 Z" />
  </svg>
  <script src="app.js"></script>
</body>

If you want the default color of the svg fill, you can just add in style tag.

<style>
  svg:hover path{
    fill:currentColor;
  }
</style>

JAVASCRIPT
If not, try this

const currentColor = $("svg").children("path").attr("fill");
$("svg").focus(function(){
  $("svg").children("path").attr("fill") = currentColor;
})

CodePudding user response：

If you don't need any interactions like click events you could override the the :hover pseudo state by disabling all point events:

svg path{
  pointer-events:none
}

As an alternative you could remove the svg's <style> element via javaScript.

let svg = document.querySelector('svg');
let svgStyle = svg.querySelector('style');

<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 25">
  <style>
svg path:hover{
  fill:#ccc
}
</style>
  <path id="singleCurve" d="M0,12.667h25C25-4.222,0-4.222,0,12.667z" fill="green"></path>
  <path id="circle-two-quarter" d="M37.5,12.667c0,6.904,5.596,12.5,12.5,12.5c0-6.511,0-12.5,0-12.5l12.5,0c0-6.903-5.597-12.5-12.5-12.5
   v12.5L37.5,12.667z" fill="pink"></path>
  <path id="circle-three-quarters" d="M75,12.667c0,6.904,5.596,12.5,12.5,12.5c6.903,0,12.5-5.597,12.5-12.5
c0-6.903-5.597-12.5-12.5-12.5v12.5L75,12.667z" fill="orange"></path>
</svg>

<button id="removeStyle" onclick="svgStyle.remove();">Remove style</button>