纯CSS上下文突出显示

Question

在这里遇到一些问题 - 我几乎就在那里，但现在完全陷入困境，希望你们中的一些CSS / HTML专家可以提供一些帮助。

我正在尝试使用工具提示进行“基于纯CSS的上下文突出显示” - 除了工具提示之外，我几乎把它大部分都集中在一起（哈哈！）。当鼠标在一个字段上移动时，我还希望工具提示“悬停”。

目前，在Safari中，似乎浏览器中的“选择”（黄色边框）出现在整个高光周围...

如果有人可以帮助解决这些问题 - 很长时间爱你！

#fields {
  padding-left:50px;
}

#example {
  float: left;
  width:500px;
  padding-right:40px;
}
#example label {
  display: block;
  float:left;
}
#example dt {
  float: left; 
  width: 50px; 
  clear: both; 
  padding-left: 5px; 
  z-index: 1; 
  position: relative;
  vertical-align: middle;
  line-height: 2em;
}
#example .tooltip {
  float:right;
  width:200px;
  margin-top:5px;
  visibility:hidden;
}
#example dd {
  width: 200px;
  float:left;
}
#example input[type=text], #example textarea {
  margin: 5px 5px 5px 0;
  width: 196px;
  border:1px solid #CCC;
}
#example input[type=text]:focus, #example textarea:focus, #example .tooltip:focus {
  border: #E9E9E9 solid ; 
  border-radius: 1px;
  border-width: 5px 200px 5px 100px; 
  left: -100px;
  margin: 2px 2px 2px 0;
  position: relative; 
  z-index: 0;
  float:left;
}

<div id="fields">
  <form id="example" action="" method=""> 
    <dt><label for="name">Name</label></dt> 
    <dd><input id="name" name="name" type="text" /></dd> 
    <div class="tooltip">some special tooltip</div>
    <dt><label for="email">Email</label></dt> 
    <dd><input id="email" name="email" type="text" /></dd>
    <div class="tooltip">some special tooltip</div>
    <dt><label for="message">Message</label></dt> 
    <dd><textarea id="message" name="message" rows="5" cols=""></textarea></dd>
  </form> 
</div>

Answer 1

重新解决q：

的工具提示部分

对于包含所有附加功能的跨浏览器工具提示，我建议http://developer.yahoo.com/yui/container/tooltip/

拉​​里

PS。您确定要让元标记选择8859-1字符集吗？ （而不是UTF-8。）

Answer 2

可以帮助边界：

.noselect {
-moz-user-select: none; /* mozilla */
-khtml-user-select: none; /* safari */
-o-user-select: none; /* opera */
cursor: pointer;
}

删除突出显示文本的可视指示（在支持的浏览器中）。