logo
Tags down

shadow

Change an SVG Fill on Hover


By : Obernovszky Janos
Date : August 01 2020, 03:00 AM
I wish this help you I have a SVG image wrapped in container and a href wrapper. I would like to change the SVG fill path on hover. I was trying this but it's not working. , .category .svg:hover path {fill: red;}
code :


Share : facebook icon twitter icon

Change background on hover and remove it on hover (with a color change on click complication)


By : user2773750
Date : March 29 2020, 07:55 AM
it should still fix some issue Use classes instead of manipulating the background color directly, then you can add !important to the clicked background color. For example, HTML:
code :
<span>where is</span>
<br/>
<span>pancake</span>
<br/>
<span>house</span>
.hovered {
    background: #0f0;
}
.clicked {
    color: #fff;
    background: #00f !important;
}
$('span').hover(function() {
    $(this).toggleClass('hovered');
});
$('span').click(function() {
    $(this).addClass('clicked');
});

CSS - Change Fill Color on Hover - SVG PATH


By : David Tod
Date : March 29 2020, 07:55 AM
it fixes the issue im using the modern ui icons pack in my project using the svg path. , You can overwrite svg css property as per below.
code :
#Main svg:hover {
    fill: #fce57e;
}

Change SVG Fill Color on hover of another element


By : spite
Date : March 29 2020, 07:55 AM
it helps some times I've been researching for quite some time today on how to change an svg fill color on hover. I've been able to make it work by using an object tag and linking to my CSS file so that I can style it externally. However I can only get this to work when I actually hover over the SVG itself. I have my object and a text label within an tag and would like to change the fill of the SVG and the color of the text label at the same time while hovering the . When I try targeting further up from the object it doesn't work. I believe I read that an SVG inside an object won't recognize any parent elements so I'm not sure if that's the problem. Any help would be appreciated! Below is a snippet of my html. I should point out the class "icon-md" is only defining the height and width of my SVG. , Were you thinking of something like that ?
code :
div{
  padding:10px;
  border:1px solid black;
}
div:hover svg path,
div:hover{
  fill:red;
  color:red;
}
<div>
This is plain text
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64">
<path id="path" style="text-indent:0;text-align:start;line-height:normal;text-transform:none;block-progression:tb;-inkscape-font-specification:Bitstream Vera Sans" d="M 5 5 L 5 6 L 5 26 L 5 27 L 6 27 L 26 27 L 27 27 L 27 26 L 27 6 L 27 5 L 26 5 L 6 5 L 5 5 z M 7 7 L 25 7 L 25 25 L 7 25 L 7 7 z M 10 10 L 10 15 L 15 15 L 15 10 L 10 10 z M 17 10 L 17 15 L 22 15 L 22 10 L 17 10 z M 10 17 L 10 22 L 15 22 L 15 17 L 10 17 z M 17 17 L 17 22 L 22 22 L 22 17 L 17 17 z" overflow="visible" font-family="Bitstream Vera Sans"/>
</svg>
</div>

Hover on part of SVG, change path fill


By : Priyadharsini K
Date : March 29 2020, 07:55 AM
wish help you to fix your issue I am trying to change the fill color of a path when I hover over it in an SVG. I can't seem to make it work. I am thinking it is a z-index issue. I've tried every selector I can think of. I've changed the order of the paths so they are the last elements in the svg. , Seems to be related to the
code :
.st4 {
  fill: none;
}
.st4 {
  fill: transparent;
}
.wedge:hover {
  fill: rgba(21, 255, 0, 0.5);
}
/*
* === CSS for SVG compass ===
*/


/*
* — Structural and appearance —
*/

* {
  z-index: 1;
}


/* Contains compass and limits its size */

.compassWrap {
  max-width: 40%;
  margin: 0 auto;
}


/* probably needs adjusted */


/* SVG styles, no need to change */

.st0 {
  fill: none;
  stroke: #505050;
  stroke-width: 4.11;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}


/* don't change */

.st1 {
  fill: none;
  stroke: #808080;
  stroke-width: 2.57;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}


/* don't change */

.st2 {
  fill: #505050;
}


/* don't change */

.st3 {
  opacity: 0.5;
}


/* don't change */

.st4 {
  fill: transparent;
}


/* don't change */


/*
* — Pie color classes —
Add the class to the path with the ID of the direction you want
Available path ID's
#nnwPie - north by north west
#wnwPie - west by north west
#wswPie - west by south west
#sswPie - south by south west
#ssePie - south by south east
#esePie - east by south east
#enePie - east by north east
#nnePie - north by north east
*/

.green {
  fill: rgba(21, 255, 0, 0.5);
}


/* best wind */

.dgreen {
  fill: rgba(12, 140, 0, 0.5);
}


/* less good wind */

.red {
  fill: rgba(255, 42, 0, 0.5);
}


/* worst wind */

.dred {
  fill: rgba(140, 23, 0, 0.5);
}


/* less bad wind */

.wedge {
  z-index: 10 !important;
}

.wedge:hover {
  fill: rgba(21, 255, 0, 0.5);
}


/* best wind */


/*
* === Arrow ===
*/


/* adjust the center point and make arrow wiggle at all times */

#arrow {
  transform-origin: 50% 59.7%;
  animation-name: wiggle;
  animation-duration: 1s;
  animation-fill-mode: forward;
  animation-iteration-count: infinite;
}


/*
* === ADD CLASS TO #arrow to move to location and wiggle ===
*/

.north#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinNorth, wiggleNorth;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.northEast#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinNorthEast, wiggleNorthEast;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.east#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinEast, wiggleEast;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.southEast#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinSouthEast, wiggleSouthEast;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.south#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinSouth, wiggleSouth;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.southWest#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinSouthWest, wiggleSouthWest;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.west#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinWest, wiggleWest;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.northWest#arrow {
  transform-origin: 50% 59.7%;
  animation-name: spinNorthWest, wiggleNorthWest;
  animation-delay: 0s, 1s;
  animation-duration: 1s, 1s;
  animation-iteration-count: 1, infinite;
}

.wedge:hover {
  fill: rgba(21, 255, 0, 0.5);
}


/*
* === Animations to make #arrow spin ===
*/


/* Spin north Animation */

@keyframes spinNorth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(45deg);
  }
}


/* Spin  north east Animation */

@keyframes spinNorthEast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(90deg);
  }
}


/* Spin  east Animation */

@keyframes spinEast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(135deg);
  }
}


/* Spin south east Animation */

@keyframes spinSouthEast {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}


/* Spin south Animation */

@keyframes spinSouth {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(225deg);
  }
}


/* Spin south west Animation */

@keyframes spinSouthWest {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}


/* Spin west Animation */

@keyframes spinWest {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(315deg);
  }
}


/* Spin north west Animation */

@keyframes spinNorthWest {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    /* 360 because this is the starting point of #arrow */
  }
}


/*
* === WIGGLES for each direction ===
*/


/* Wiggle north Animation */

@keyframes wiggleNorth {
  0% {
    transform: rotate(46deg);
  }
  50% {
    transform: rotate(44deg);
  }
  100% {
    transform: rotate(46deg);
  }
}


/* Wiggle north east Animation */

@keyframes wiggleNorthEast {
  0% {
    transform: rotate(91deg);
  }
  50% {
    transform: rotate(89deg);
  }
  100% {
    transform: rotate(91deg);
  }
}


/* Wiggle  east Animation */

@keyframes wiggleEast {
  0% {
    transform: rotate(136deg);
  }
  50% {
    transform: rotate(134deg);
  }
  100% {
    transform: rotate(136deg);
  }
}


/* Wiggle south east Animation */

@keyframes wiggleSouthEast {
  0% {
    transform: rotate(181deg);
  }
  50% {
    transform: rotate(179deg);
  }
  100% {
    transform: rotate(181deg);
  }
}


/* Wiggle south Animation */

@keyframes wiggleSouth {
  0% {
    transform: rotate(226deg);
  }
  50% {
    transform: rotate(224deg);
  }
  100% {
    transform: rotate(226deg);
  }
}


/* Wiggle south west Animation */

@keyframes wiggleSouthWest {
  0% {
    transform: rotate(271deg);
  }
  50% {
    transform: rotate(269deg);
  }
  100% {
    transform: rotate(271deg);
  }
}


/* Wiggle west Animation */

@keyframes wiggleWest {
  0% {
    transform: rotate(316deg);
  }
  50% {
    transform: rotate(314deg);
  }
  100% {
    transform: rotate(316deg);
  }
}


/* Wiggle north west Animation */

@keyframes wiggleNorthWest {
  0% {
    transform: rotate(361deg);
  }
  50% {
    transform: rotate(359deg);
  }
  100% {
    transform: rotate(361deg);
  }
}


/*
* === wiggle when no direction ===
*/

@keyframes wiggle {
  0% {
    transform: rotate(1deg);
  }
  50% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(1deg);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="compassWrap">
  <svg version="1.1" id="Layer_4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 116.3 144" style="enable-background:new 0 0 116.3 144;" xml:space="preserve">

<title>compass</title>
<line id="N" class="st0" x1="58.2" y1="31.3" x2="58.2" y2="49.6"/>
<line id="NW" class="st1" x1="18.5" y1="46.1" x2="31.4" y2="59"/>
<line id="W" class="st0" x1="3.6" y1="85.7" x2="21.9" y2="85.7"/>
<line id="SW" class="st1" x1="18.3" y1="125.5" x2="31.3" y2="112.5"/>
<line id="S" class="st0" x1="58" y1="140.3" x2="58" y2="122"/>
<line id="SE" class="st1" x1="97.7" y1="125.6" x2="84.8" y2="112.6"/>
<line id="E" class="st0" x1="113.4" y1="85.9" x2="95.1" y2="85.9"/>
<line id="NE" class="st1" x1="97.8" y1="46.2" x2="84.9" y2="59.1"/>
<path id="compass" class="st2" d="M69.6,28.8c6.7-6.3,7-16.9,0.7-23.6s-16.9-7-23.6-0.7s-7,16.9-0.7,23.6c0.2,0.2,0.4,0.5,0.7,0.7
	c-31.5,6.3-51.9,37-45.6,68.5s37,51.9,68.5,45.6c31.5-6.3,51.9-37,45.6-68.5C110.6,51.4,92.6,33.4,69.6,28.8z M58.2,6.5
	c5.6,0,10.2,4.6,10.2,10.2H48C48,11.1,52.6,6.5,58.2,6.5z M58.2,138.3c-29,0-52.5-23.5-52.5-52.5s23.5-52.5,52.5-52.5
	c29,0,52.5,23.5,52.5,52.5c0,0,0,0,0,0C110.6,114.8,87.1,138.3,58.2,138.3z"/>
<path id="inner_compass" class="st2" d="M58.2,130.8c-24.9,0-45.2-20.2-45.2-45.2s20.2-45.2,45.2-45.2c24.9,0,45.2,20.2,45.2,45.1
	c0,0,0,0,0,0C103.3,110.6,83.1,130.8,58.2,130.8z M58.2,43.8c-23.1,0-41.9,18.8-41.9,41.9s18.8,41.9,41.9,41.9s41.9-18.8,41.9-41.9
	C100.1,62.6,81.3,43.8,58.2,43.8L58.2,43.8z"/>

<polygon id="arrow" class="st2" points="78.4,105.3 80.2,107.1 79.1,108.3 77.2,106.4 75.5,109.7 74.1,108.6 75.9,105.1 75.1,104.3 
	73.3,107.7 71.9,106.6 73.8,103 72.9,102.1 71.2,105.6 69.8,104.5 71.7,100.9 63.5,92.7 63.5,92.7 41.5,70.7 41.4,70.8 39,74.3 
	34.5,62.5 46.3,67.1 42.5,69.5 64.6,91.6 65.2,92.1 72.9,99.8 76.5,98 77.6,99.5 74.1,101.1 74.9,101.9 78.6,100 79.7,101.4 
	76.2,103.1 75.9,102.9 77.1,104 80.8,102.3 81.9,103.8 "/>

	<path id="nnwPie" class="st4 wedge" d="M57.9,27.7v58.2l-41-41C27.8,33.9,42.5,27.7,57.9,27.7z"/>


	<path id="wnwPie" class="st4 wedge" d="M57.9,85.8H0.2v-0.2c0-15.3,6-30,16.8-40.8L57.9,85.8z"/>


	<path id="wswPie" class="st4 wedge" d="M57.9,85.8l-40.8,40.8c-10.8-10.8-16.9-25.5-17-40.8H57.9z"/>


	<path id="sswPie" class="st4 wedge" d="M57.9,85.8v57.8c-15.3,0-30-6.2-40.8-17L57.9,85.8z"/>


	<path id="ssePie" class="st4 wedge" d="M99,126.9c-10.8,10.8-25.5,16.8-40.8,16.8H58V85.8L99,126.9z"/>


	<path id="esePie" class="st4 wedge" d="M116.2,85.8c0,15.4-6.2,30.2-17.2,41l-41-41H116.2z"/>


	<path id="enePie" class="st4 wedge" d="M116.2,85.7v0.2H57.9l41.2-41.2C110.1,55.5,116.2,70.3,116.2,85.7z"/>


	<path id="nnePie" class="st4 wedge" d="M99.1,44.6L57.9,85.8V27.7h0.2C73.5,27.6,88.3,33.7,99.1,44.6z"/>

</svg>
</div>

SVG fill on text change on hover


By : Steven
Date : March 29 2020, 07:55 AM
I wish this helpful for you .circle-1 is a not a parent for the text elements but a sibling, so you need to use the sibling selector ~
code :
.holder{
  width: 300px;
  height: 300px;
}
.circle-1{
  fill:white;
}
.circle-1:hover{
  fill:purple;
}
.main-text{
  display: block;
}
.alt-text{
  display:none;
}
.circle-1:hover ~ .main-text{
  display:none;
}
.circle-1:hover ~ .alt-text{
  display:block;
}
<div class="holder">
  <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 170.36 170.36">
    <defs>
    <style>.cls-1{fill:#fff;}.cls-2,.cls-3,.cls-4{fill:#9b00f4;}.cls-3{font-size:56.54px;}.cls-3,.cls-4{font-family:Raleway-Bold, Raleway;font-weight:700;}.cls-4{font-size:48.97px;}</style>
    </defs>
    <circle class="circle-1" cx="960.15" cy="540.18" r="83.18" transform="translate(-1008.6 -46.45) rotate(-22.5)"/>
    <path class="cls-2" d="M960.15,459A81.18,81.18,0,1,1,879,540.18,81.28,81.28,0,0,1,960.15,459m0-4a85.18,85.18,0,1,0,85.18,85.18A85.18,85.18,0,0,0,960.15,455Z" transform="translate(-874.97 -455)"/>
    <text class="cls-3 main-text" transform="translate(73.19 99.05)">1</text>
    <text class="cls-4 alt-text" transform="translate(70.67 94.69) rotate(0.08)">2</text>
  </svg>
</div>
Related Posts Related Posts :
  • Override parent's border bottom
  • How to display li inline in the nav bar
  • CSS input :checked hack
  • Change background img on hover with fade effect HTML CSS
  • SCSS compiling to CSS but index.html not loading css
  • How to create Irish flag using just HTML and CSS?
  • Why is my bootstrap timeline not styling correctly?
  • Best approach for aligning 3 square images, 1 large and 2 small, the large left-adjacent to the 2 small stacked on top o
  • CSS element appears below current line. How to fix?
  • Unable to use html controls from code behind
  • A few name classes in one element
  • How display specific no. of rows in css grid?
  • How to bind html in Angular 8
  • Sidebar is not floating to right
  • Add parentheses before and after paragraph in HTML/CSS
  • Apply css stylesheet to specific div
  • Click an item in autocomplete list with VBA and HTML
  • CSS - if text contains no spaces it makes horizontal scroll inside tab div
  • Footer rising up because of not sufficient content
  • Error while loading csv to D3.js through localhost
  • Is it possible to combine all SVG icons into one file for performance in HTML?
  • How do you center an error message created with BootstrapValidate?
  • CSS Label background Color setting - Only apply background color to Label Length
  • CSS counters doesn't work in subitems inside of div
  • Masked svg element not showing whole svg item
  • How can I set single child element in center align using css?
  • HTML Input Gradient Text
  • Text inside floated div not responsive
  • Does Text-To-Speech software read HTML comments?
  • Creating HTML Lists Purely in CSS
  • confused by strange web address especially by "ai" term in start
  • can not load the css file
  • <input type="file"> accept by extensions not work
  • link "see more" in the text box, at the overflow
  • jQuery volume UI different than what I pushed out?
  • dropdown menu is hiding behind toolbar
  • css selectors first and last occurance
  • How to change label on input focus when input comes after label?
  • Why does pressing Enter on a button not cause :active state in Chrome?
  • Change border from parent div by hovering the child div
  • Remove border when display property is set to none
  • How to align center of one element with baseline of another in a flexbox
  • HTML How to make a horizontal navigation bar under header
  • Error passing W3.org Validator: Illegal character in scheme data
  • IE does not detect inline style fast enough
  • Is it good practise to have select element's option value as id of records (HTML)?
  • .mp4 video is not playing in html but ather same format videos works
  • Why transition of background: linear-gradient() does not work on hover?
  • How to make a flat not solid border using css?
  • Hand emoji Here has extra space, how can I solve this with CSS elegantly?
  • Bootstrap Nav Items right problem with Dropdown
  • Why isn't text-justify: distribute working in Chrome?
  • Using custom CSS when there is no div ID
  • How to set background image with two alternative image? (set substitute image when there is no image)
  • Compile template string in innerHTML
  • What is the best solution to CSS div overflow problem?
  • CSS fit a div inside viewport while keeping aspect ratio
  • Email not rendering properly in outlook - hide image on mobile and not importing the font
  • Strange CSS class used in email signature template
  • how to pull these box together
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org