outline node on hover

Question

Here is an example of outlining a div on hover.

However I am trying to emulate something like chrome inspector/firebug where the user can select a DOM node by mouseover and clicking on an element.

http://jsfiddle.net/Xuddz/57/

However, I don't want to outline parent nodes when hovering (like inspect/firebug). Is there an easy way to do this via css?

:hover {
    outline: 1px solid blue;
}

thanks

You can't `:hover` a child/descendant element without hovering over the parent/ancestor as well. If you need to implement non-parent highlighting in the absence of a CSS parent-selector then you'll need to use JavaScript, unfortunately. — David Thomas, Jan 01 '13 at 06:50

score 0 · Answer 1 · answered Jan 01 '13 at 02:10

You have the code already in your question...

Say your node had a style called MyNode then the hover style for MyNode would be MyNode:hover....

In the  CSS stylesheet...
Your node is borderless and blue text...
When mouse is over your node then its bordered in red and has red text...


.MyNode
  {
  border-style: none;
  color: #0000FF;
  }

.MyNode:Hover
  {
  border: solid 1px #FF0000;
  color: FF0000;
  }

outline node on hover

1 Answers1