In short - I am trying to change the stroke-opacity of a path within an by hovering over one of the titles to the left (you'll see the 'presidio' title has a link to it) none of the JQuery/javascript answers I've seen so far are working.

the latest snippet I've tried is:

d3.select('.presidio').on('mouseover', function(){
  console.log('hey!');
  var object = document.getElementById("presidio");
  object.setAttribute("stroke-opacity", 1);
});

the svg is huge so pasting it here would take a million years to read. but if you care to inspect the svg element here: .html

In short - I am trying to change the stroke-opacity of a path within an by hovering over one of the titles to the left (you'll see the 'presidio' title has a link to it) none of the JQuery/javascript answers I've seen so far are working.

the latest snippet I've tried is:

d3.select('.presidio').on('mouseover', function(){
  console.log('hey!');
  var object = document.getElementById("presidio");
  object.setAttribute("stroke-opacity", 1);
});

the svg is huge so pasting it here would take a million years to read. but if you care to inspect the svg element here: http://www.petegetscreative./hoods/hoods.html

• javascript
• jquery
• svg
• d3.js

3 Answers 3

To change the opacity of an element with id 'presidio:

d3.select('#presidio').style("stroke-opacity", "1");

To add a mouse over effect to all elements with the class 'presidio'

d3.selectAll('.presidio').on('mouseover', function(){
  d3.select(this).style("stroke-opacity", "1"); })

I have not tested this, but have you tried:

object.setAttribute("stroke-opacity", "1");

I thought having the quotes was proper syntax.

I have tested this...

object.style['stroke-opacity'] = 1;