css - 悬停时的大纲节点

Question

这是在悬停时勾勒出 div 的示例。

但是我正在尝试模拟类似 chrome inspector/firebug 的东西，用户可以通过鼠标悬停并单击元素来选择 DOM 节点。

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

但是，我不想在悬停时勾勒出父节点(如检查/ Firebug )。有没有一种简单的方法可以通过 css 做到这一点？

:hover {
    outline: 1px solid blue;
}
​

谢谢

Answer 1

您的问题中已有代码...

假设您的节点有一个名为 MyNode 的样式，那么 MyNode 的悬停样式将是 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;
  }