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 :
  • 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
  • Mixing colours in html
  • Is there a way to make a div push/move another div when it expands/moves/displays on hover using only HTML & CSS?
  • Too much of a space between columns in html table
  • There is nothing displayed in my Angular App
  • How to remove the white background of an image HTML-CSS?
  • PrimeNG Datatable with row exansion call new service and display data in a row Angular 5
  • Size of picture in background repeat?
  • Force screen reader to read numbers as individual digits
  • Set width equal to hight
  • Error: Your a element should be nested within your new p element
  • How to extract a column from this generated table?
  • how to force link open on a new tab on iFrame?
  • How do you disable browser Autocomplete on web form field / input tag?
  • How do I make a checkbox toggle from clicking on the text label as well?
  • How do I give my web sites an icon for iPhone?
  • How to break word after special character like Hyphens (-)
  • Multiple submit buttons in an HTML form
  • Percentage width child element in absolutely positioned parent on Internet Explorer 7
  • shadow
    Privacy Policy - Terms - Contact Us © voile276.org