Как изменить цвет ссылки на событие mouseover

Когда я перемещаю мышь над узлом, тогда цвет ссылки должен измениться. Если я перемещаю мышь над родительским узлом, то все ссылки на дочерние узлы должны менять цвет ссылки и когда я перемещаю мышь над дочерним узлом, тогда все, что это ребенок, меняет цвет там, пожалуйста, помогите мне. У меня есть следующий код. Где я должен изменить свой код? Что мне делать? Или есть ли какие-то альтернативы для этого?Как изменить цвет ссылки на событие mouseover

<!DOCTYPE html> 
<html> 
    <head> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
<style type="text/css"> 

.node circle { 
    cursor: pointer; 
    stroke: #3182bd; 
    stroke-width: .5px; 
} 


line.link { 
    fill: none; 
    stroke: #9ecae1; 
    stroke-width: 1.5px; 
} 

    </style> 
    </head> 
    <body> 
    <div id="chart"></div> 
    <script src="../d3/d3.v3.min.js"></script> 
    <script type="text/javascript"> 

var w = 960, 
    h = 500, 
    root; 

var force = d3.layout.force() 
    .linkDistance(200) 
    .charge(-500) 
    //.gravity(-0.1) 
    .size([w, h]); 

var vis = d3.select("#chart").append("svg:svg") 
    .attr("width", w*2) 
    .attr("height", h*2); 

d3.json("try.json", function(json) { 
    root = json; 
    function toggleAll(d) { 
          if (d.children) d.children.forEach(toggleAll);click(d); 
         } 
    root.children.forEach(toggleAll); 
    update(); 
}); 

function update() { 
    var nodes = flatten(root), 
     links = d3.layout.tree().links(nodes); 


root.fixed=true; 
    root.x=w/2; 
    root.y=h/2+100; 
    // Restart the force layout. 
    force 
     .nodes(nodes) 
     .links(links) 
     .start(); 

    // Update the links… 
    var link = vis.selectAll("line.link") 
     .data(links, function(d) { return d.target.id; }); 

    // Enter any new links. 
    link.enter().insert("svg:line", ".node") 
     .attr("class", "link") 
     .attr("x1", function(d) { return d.source.x+100; }) 
     .attr("y1", function(d) { return d.source.y+100; }) 
     .attr("x2", function(d) { return d.target.x+100; }) 
     .attr("y2", function(d) { return d.target.y+100; }); 
    // Exit any old links. 
    link.exit().remove(); 

    // Update the nodes… 
    var node = vis.selectAll("g.node") 
     .data(nodes, function(d) { return d.id; }) 

    node.select("circle") 
    .style("fill", color); 

    // Enter any new nodes. 
    var nodeEnter = node.enter().append("svg:g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x+100 + "," + d.y+100 +  ")"; }) 
     .on("click", click); 

    nodeEnter.append("svg:circle") 
     .attr("r", function(d) { return d.comp ? 70 : 35; }) 
     .style("fill", color); 

    nodeEnter.append("svg:text") 
     .attr("text-anchor", "middle") 
     .attr("dy", ".35em") 
     .text(function(d) { return d.comp ? d.comp : d.class? d.class : d.patent; }); 

    // Exit any old nodes. 
    node.exit().remove(); 

    force.on("tick", function() { 
    link.attr("x1", function(d) { return d.source.x; }) 
     .attr("y1", function(d) { return d.source.y; }) 
     .attr("x2", function(d) { return d.target.x; }) 
     .attr("y2", function(d) { return d.target.y; }); 

    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";  });  
    }); 
} 

// Color leaf nodes orange, and packages white or blue. 
function color(d) { 
    return d.comp ? "#3182bd": d._children ? "#c6dbef" : d.children ? "#3182bd" :  "#fd8d3c"; 
} 

// Toggle children on click. 
function click(d) { 
    if (d.children) { 
    d._children = d.children; 
    d.children = null; 
    } else { 
    d.children = d._children; 
    d._children = null; 
    } 
    update(); 
} 

// Returns a list of all nodes under the root. 
function flatten(root) { 
    var nodes = [], i = 0; 

    function recurse(node) { 
    if (node.children) node.children.forEach(recurse); 
    if (!node.id) node.id = ++i; 
    nodes.push(node); 
    } 

    recurse(root); 
    return nodes; 
    } 

     </script> 
     </body> 
    </html>

источник

2013-06-19 coder

для привязки цвета ссылки при наведении мыши, вы можете использовать стили CSS. см. здесь http://www.w3schools.com/css/css_link.asp –

это не работает. – coder

, если у вас есть Chrome, щелкните правой кнопкой мыши на любом месте на странице и выберите «Осмотреть элемент» или если у вас есть firefox Firebug и посмотрите, есть ли какая-либо ошибка на вкладке «Консоль»? –

Если вы положили это в свой стиль css, он должен изменить цвет до красной линии, когда мышь зависнет.

line.link:hover {stroke: red;stroke-width: 2px}

Надеюсь, это поможет.

источник

2013-08-05 11:15:49 drequinox

Как изменить цвет ссылки на событие mouseover

ответ

Смежные вопросы