CSSのみを使用して、<a>にカーソルを合わせてdivを表示します

誰かが<a>要素の上に移動したときにdivを表示したいのですが、JavaScriptではなくCSSでこれを実行したいと思います。これをどのように達成できるか知っていますか？

あなたはこのようなことをすることができます：

div {
    display: none;
}
    
a:hover + div {
    display: block;
}

<a>Hover over me!</a>
<div>Stuff shown on hover</div>

これは隣接する兄弟セレクターを使用し、suckerfishドロップダウンメニューの基礎になります。

HTML5ではアンカー要素がほとんどすべてをラップできるため、その場合、div要素をアンカーの子にすることができます。それ以外の場合の原理は同じです- :hover疑似クラスを使用してdisplay別の要素のプロパティを変更します。

.showme {
  display: none;
}

.showhim:hover .showme {
  display: block;
}

<div class="showhim">HOVER ME
  <div class="showme">hai</div>
</div>

jsfiddle

この答えは人気があるので、少し説明が必要だと思います。内部要素にカーソルを合わせたときにこのメソッドを使用すると、内部要素は消えません。.showmeは.showhim内にあるため、2行のテキスト（または何でも）の間にマウスを移動しても消えません。

これらは、そのような動作を実装する際に注意する必要があるquirqの例です。

それはあなたがこれを何のために必要とするかによります。この方法はメニュースタイルのシナリオに適していますが、ツールバーにはYi Jiangが適しています。

私は不透明度を使用する方が良いことがわかりました、それはあなたが素晴らしい完成したホバー効果を作るためにcss3トランジションを追加することを可能にします。トランジションは古いIEブラウザによって削除されるだけなので、正常に低下します。

#stuff {
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-bottom:15px;
}
#hover:hover + #stuff {
    opacity: 1.0;
}

<div id="hover">Hover</div>
<div id="stuff">stuff</div>

私はエキスパートという意味で知っていますが、このコードについて何かを解決したことを私は信じられないほど誇りに思っています。もし、するなら：

div {
    display: none;
}

a:hover > div {
    display: block;
} 

（ '>'に注意してください）タグ内にすべてを含めることができます。トリガー（それ自体のdiv内にあるか、タグ内にまっすぐ上にあるか、何でもかまいません）が物理的に触れている限り、表示されたdivでは、マウスを一方から他方に移動できます。

多分これは役に立たないかもしれませんが、私は明らかにしたdivをオーバーフローに設定する必要がありました：auto、スクロールバーがあり、divから離れるとすぐに使用できない場合がありました。

実際、公開されたdivを作成する方法を最終的に検討した後（これは現在、兄弟ではなくトリガーの子です）、Zインデックスの点でトリガーの後ろに座っています（このページの少しの助けを借りて） ：親要素を子の上に表示する方法）表示されたdivをロールオーバーしてスクロールする必要はありません。トリガーの上にマウスを置いたまま、ホイールなどを使用します。

私が明らかにしたdivはページのほとんどをカバーしているので、この手法により、マウスを動かすたびに画面が1つの状態から別の状態に点滅するのではなく、ずっと永続的になります。実は直感的なので、自分をとても誇りに思っています。

唯一の欠点は、リンクを全体に配置できないことですが、全体を1つの大きなリンクとして使用できます。

この回答では、非表示要素が表示されるときに想定されるディスプレイの種類（インラインなど）を知っている必要はありません。

.hoverable:not(:hover) + .show-on-hover {
    display: none;
}

<a class="hoverable">Hover over me!</a>
<div class="show-on-hover">I'm a block element.</div>

<hr />

<a class="hoverable">Hover over me also!</a>
<span class="show-on-hover">I'm an inline element.</span>

これは、隣接する兄弟セレクターとnotセレクターを使用します。

Yi Jiang'sが提供する正しいソリューションを拡張した、この汎用テンプレートソリューションを提供したいと思います。

追加の利点は次のとおりです。

• 任意の要素タイプまたは複数の要素の上にホバーするためのサポート。
• ポップアップは、オブジェクトを含む任意の要素タイプまたは要素のセットにすることができます。
• 自己文書化コード;
• ポップアップが他の要素の上に表示されるようにします。
• データベースからHTMLコードを生成する場合に従うべき健全な基礎。

HTMLに次の構造を配置します。

<div class="information_popup_container">
<div class="information">
<!-- The thing or things you want to hover over go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
<div class="popup_information">
<!-- The thing or things you want to popup go here such as images, tables, 
     paragraphs, objects other divisions etc. --> 
</div>
</div>

CSSには、次の構造を配置します。

div.information_popup_container {
position: absolute;
width:0px;
height:0px;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information {
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.popup_information {
position: fixed;
visibility: hidden;
/* Position Information */
/* Appearance Information */
}
div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

注意すべき点は次のとおりです。

1. div.popupの位置が固定に設定されているため（絶対でも機能します）、コンテンツはドキュメントの通常のフロー内になく、visible属性が適切に機能します。
2. z-indexは、div.popupが他のページ要素の上に表示されるように設定されています。
3. information_popup_containerは小さいサイズに設定されているため、ホバーすることはできません。
4. このコードは、div.information要素へのホバーのみをサポートしています。div.informationとdiv.popupの両方のホバーをサポートするには、以下のポップアップにホバーを参照してください。
5. Opera 12.16 Internet Explorer 10.0.9200、Firefox 18.0およびGoogle Chrome 28.0.15でテストされ、期待どおりに動作します。

ポップアップにカーソルを合わせる

追加情報として。ポップアップに切り取りと貼り付けが必要な情報が含まれている場合や、やり取りしたいオブジェクトが含まれている場合は、最初に置き換えます。

div.information_popup_container > div.information:hover + div.popup_information {
visibility: visible;
z-index: 200;
}

と

div.information_popup_container > div.information:hover + div.popup_information 
,div.information_popup_container > div.popup_information:hover {
visibility: visible;
z-index: 200;
}

次に、div.informationと重複するようにdiv.popupの位置を調整します。数ピクセルは、div.popupがcusorをdiv.informationから移動したときにホバーを確実に受信できるようにするのに十分です。

これはInternet Explorer 10.0.9200では期待どおりに機能せず、Opera 12.16、Firefox 18.0、Google Chrome 28.0.15では期待どおりに機能します。

ポップアップマルチレベルメニューの完全な例については、fiddle http://jsfiddle.net/F68Le/を参照してください。

このコードをテストしてください

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style type="text/css"> 
div
{
display:none;
color:black
width:100px;
height:100px;
background:white;
animation:myfirst 9s;
-moz-animation:myfirst 9s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */  

}

@keyframes myfirst
{
0%   {background:blue;}
25%  {background:yellow;}
50%  {background:blue;}
100% {background:green;}
}

 @-moz-keyframes myfirst /* Firefox */
{
0%   {background:white;}
50%  {background:blue;}
100% {background:green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
  0%   {background:red;}
  25%  {background:yellow;}
  50%  {background:blue;}
  100% {background:green;}
}

a:hover + div{
display:inline;
} 
</style>
</head>
<body>
<a href="#">Hover over me!</a>
<div>the color is changing now</div>
<div></div>
</body>
</html>

+最初ではない、ネストされた要素を「選択」できるように、>選択ネストされた要素のみ-有効活用にある~親の子である任意の要素を選択することを可能にする要素を推移しました。不透明度/幅と遷移を使用して、滑らかな外観を提供できます

div { transition: all 1s }
.ccc, .ggg { opacity: 0; color: red}
.ccc { height: 0 }

.aaa:hover ~ .bbb .ccc { opacity: 1; height: 34px }
.aaa:hover ~ .eee .fff .ggg { opacity: 1 }

<div class="aaa">Hover me... to see<br><br> </div>

<div class='bbb'>BBBBB
  <div class='ccc'>CCCCC
    <div class='ddd'>DDDDD</div>
  </div>
</div>

<div class='eee'>EEEEE
  <div class='fff'>FFFFF
    <div class='ggg'>GGGGG</div>
    <div class='hhh'>HHHHH</div>
  </div>
</div>

私にとって、トリガー要素（その場合はa）を離れるたびに非表示にならずに非表示のdivとやり取りしたい場合は、追加する必要があります。

div:hover {
    display: block;
}

主な回答に基づくと、これは例であり、?近くのリンクをクリックしたときに情報ツールチップを表示するのに役立ちます。

document.onclick = function() { document.getElementById("tooltip").style.display = 'none'; };

document.getElementById("tooltip").onclick = function(e) { e.stopPropagation(); }

document.getElementById("help").onclick = function(e) { document.getElementById("tooltip").style.display = 'block';
e.stopPropagation(); };

#help { opacity: 0; margin-left: 0.1em; padding: 0.4em; }
    
a:hover + #help, #help:hover { opacity: 0.5; cursor: pointer; }

#tooltip { border: 1px solid black; display: none; padding: 0.75em; width: 50%; text-align: center; font-family: sans-serif; font-size:0.8em; }

<a href="">Delete all obsolete informations</a><span id="help">?</span>
<div id="tooltip">All data older than 2 weeks will be deleted.</div>

このCSSを使用したテストから：

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

そして、このHTML：

<div class="expand">expand</div>
<div class="expand">expand</div>
<div class="expandable">expandable</div>

、2番目のを使用して拡張するが、最初の1を使用して拡張しないという結果になりました。したがって、ホバーターゲットと非表示のdivの間にdivがある場合、それは機能しません。

HTML

<div>
    <h4>Show content</h4>
</div>
<div>
  <p>Hello World</p>
</div>

CSS

 div+div {
    display: none;
 }

 div:hover +div {
   display: block;
 }

CodePen：divにカーソルを合わせると、別のdivにテキストが表示されます

忘れずに。画像の周りをホバーする場合は、コンテナーの周りに配置する必要があります。css：

.brand:hover + .brand-sales {
    display: block;
}

.brand-sales {
    display: none;
}

これにカーソルを合わせると：

<span className="brand">
   <img src="https://murmure.me/wp-content/uploads/2017/10/nike-square-1900x1900.jpg" 
     alt"some image class="product-card-place-logo"/>
</span>

これは表示されます：

<div class="product-card-sales-container brand-sales">
    <div class="product-card-">Message from the business goes here. They can talk alot or not</div>
</div>