html - 纯 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/

拉里

附言。您确定要元标记选择 8859-1 字符集吗？ (而不是 UTF-8。)