ホバーに追加のコンテンツを含むチェックボックスラベルを実装するにはどうすればよいですか？

Question

Kayakは、:hoverに表示されているラベルに「唯一の」オプションが付いたチェックボックスメニューを使用します。これはJSやCSSでどのように実装できますか？

クロームインスペクタを使用して

Answer 1

、Kayakのがこれを実装方法を確認するのは簡単です：

HTML：

<div class="row"> 
    <div class="right"> 
    <a class="only">only</a> 
    <a class="price">$500</a> 
    </div> 
    <span> 
    ...checkbox ...1 stop 
    </span> 
</div> 

CSS：それはですので

.right { 
    float: right; 
} 
.only { 
    display: none; 
} 
.row:hover .only { 
    display: block; 
}