css - 悬停时的轮廓节点

Question

这是一个在悬停时概述 div 的示例。

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

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

但是，我不想在悬停时概述父节点（如检查/萤火虫）。有没有一种简单的方法可以通过 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;
  }