1

I am moving all CSS into inline JavaScript code in this example: jsfiddle. (the purpose is to test a plugin for svg manipulation, that doesn't like CSS from separate files)

I don't know how to transfer this line in CSS:

.link:hover {
    stroke-opacity: .5;
}

to this line in JavaScript:

// add in the links
var link = svg.append("g").selectAll(".link")
.data(graph.links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", path)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-opacity", ".2")
.style("stroke-width", function (d) {
    return Math.max(1, d.dy);
})
.sort(function (a, b) {
    return b.dy - a.dy;
});

Could you help me? Thnx.

codingrose
  • 15,563
  • 11
  • 39
  • 58
VividD
  • 10,456
  • 6
  • 64
  • 111
  • If all the problem is the CSS coming from a separate file, why don't set a style in the head ? – vals Jan 12 '14 at 19:43
  • I ment to say CSS defined explicitly through sheets, the place/file is not important. My bad, sorry. – VividD Jan 12 '14 at 19:52
  • Ignoring the D3 aspect, getting hover states, etc., in inline styles seems to be a common question in SO: [example1](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css) [example2](http://stackoverflow.com/questions/986618/is-it-possible-to-create-inline-pseudo-styles) [example3](http://stackoverflow.com/questions/5113775/using-hover-for-an-elements-inline-style-using-html-css-php). It looks like there is a [W3C proposal](http://www.w3.org/TR/2002/WD-css-style-attr-20020515), once upon a time, but never implemented in browsers. – AmeliaBR Jan 12 '14 at 23:27

1 Answers1

1

Updated Fiddle: http://jsfiddle.net/j9yB9/

I simply added these two lines:

.style("stroke-opacity", ".2")
.on("mouseover", function() { d3.select(this).style("stroke-opacity", ".5") } )
.on("mouseout", function() { d3.select(this).style("stroke-opacity", ".2") } )
Jonah
  • 15,806
  • 22
  • 87
  • 161
  • @AmeliaBR, Jonah I think standard committee guys made a booboo when they couldn't anticipate need for defining "hover" styles inline... – VividD Jan 13 '14 at 19:04
  • Compared to some of their other oversights, this one is merely a minor nuisance :) – Jonah Jan 13 '14 at 20:39