hover.css

.layer {
	opacity:0;
}
.layer#visible 
{
	opacity:1;
}
.layer:hover
{
	opacity:1;
}
:target 
{
	opacity:1;
} 

simple_example.dot

digraph G {
	stylesheet="hover.css"

	//we declare a visible layer and a layer for each node
	//the layer names should be different from the node
	//names as they are used for ids on both instances
	//this is why they are appended with _layer
	layers="visible:node1_layer:node2_layer:node3_layer"

	//the nodes need to be filled for hovering and clicking 
	//to work nicely	
	node [style="filled" fillcolor="white"] 

	//each node is part of the visible layer and it's own
	//and the href points to the node layer
	node1 [layer="visible,node1_layer" href="#node1_layer"]
	node2 [layer="visible,node2_layer" href="#node2_layer"]
	node3 [layer="visible,node3_layer" href="#node3_layer"]
	
	//the edges are part of the tail node's layer
	node2 -> node3  [layer="node2_layer"]
	node1 -> node3  [layer="node1_layer"]
	node3 -> node1  [layer="node3_layer"]
	node3 -> node2  [layer="node3_layer"]

}