純粋なCSSのコンテキスト強調表示

Question

ここにいくつかの問題があります。私はほとんどそこそこですが、今では完全に固執しており、あなたのCSS/HTML Gurusの何人かが助けてくれることを期待しています。

"純粋な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

あなたの質問の一部：

クロスブラウザは、すべてのエクストラでツールチップのために、私は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; 
} 

は、（サポートされているブラウザで）テキストをハイライト表示の視覚表示を削除します。