All Questions
7
questions
1
vote
5
answers
1k
views
SVG: Change fill color on hover with JS
I am having troubles changing the color of a specific element in a SVG on hover. I need to do that in JS and not CSS.
The element as a class "col_05" and I would need that on hover on that ...
- 11
0
votes
1
answer
101
views
Is it possible to deactivate addeventlistener (mouseover/mouseout) on a specific condition in Javascript?
let currentColor = 0
function makeHover () {
console.log(currentColor);
svgAll.forEach(item => {
item.addEventListener('mouseover', event => {
...
- 27
0
votes
1
answer
4k
views
Mouseover effect in SVG
I'm trying to change the color of an SVG shape upon mouse hover.
Doesn't work.
<style>
a:hover {cursor: pointer}
path:hover {fill: #e51451; opacity: 1}
</style>
The cursor ...
- 31
0
votes
2
answers
97
views
Different css style before and after hover
I have an svg object and I want it to be styled differently:
a) the first time the image loads (fill: white)
b) when the mouse hovers over the object (fill: yellow)
c) when the mouse leaves the object ...
- 99
1
vote
0
answers
625
views
SVG mouseover and hover bug in Firefox?
.dot {
stroke:none;
fill: red;
}
.dot:hover {
fill: yellow;
}
<svg preserveAspectRatio="xMidYMin" width="100%" height="100%" viewBox="-1 -1 2 2">
<g transform="translate(0,0) scale(1)"...
- 4,633
2
votes
1
answer
3k
views
How to Animate the fill attribute of inline SVG on mouseover/mouseout (SMIL)
I have created a simple inline SVG.
Using SMIL I have tried to animate the fill attribute to pink for all paths upon mouseover of the parent SVG id.
On mouseout I would like the fill to always reset....
- 944
4
votes
3
answers
4k
views
SVG hover with multiple elements
I've two svg elements on which I've applied a mouseover/mouseout event. The goal is to increase the radius of the mask on mouseover to a size specified by a variable (maxMaskRadius) and decrease it on ...
- 5,414