別のdivにカーソルを置くと、divにテキストが表示される

要素の上にカーソルを置くとテキストで塗りつぶしたい空のdivがあります。テキストは、移動する要素ごとに異なる必要があります。結果なしで、.economicsまたは.workforceの上にマウスを移動する際のブロックを：別のdivにカーソルを置くと、divにテキストが表示される

は、ここで表示するために、pのを設定するために、私はCSSのみで試してみたcode

.text-info{ 
 
    height: 50px; 
 
    width: 200px; 
 
    border: 2px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
.economics{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid black; 
 
} 
 
.economics:hover{ 
 
    background-color: grey 
 
} 
 
.workforce{ 
 
    height: 100px; 
 
    width: 100px; 
 
    border: 2px solid black; 
 
} 
 
.workforce:hover{ 
 
    background-color: grey 
 
} 
 

 
#economics, #workforce{ 
 
    display: none; 
 
}

<div class="text-info"> 
 
    <p id="economics">blabla</p> 
 
    <p id="workforce">blablabla</p> 
 
</div> 
 
<div class="economics"></div> 
 
<div class="workforce"></div>

です。

ご協力いただきありがとうございます。

出典

2017-03-24 Antezo

CSSであなただけのように、彼らの親要素をホバー上の要素を表示することができます：#economicsが.economics内にある場合

.economics:hover #economics{ 
    display: block; 
}

これは動作します。

この場合、絶対位置を#economicsに追加して、.text-infoホルダーに視覚的に入れることができます。

出典

2017-03-24 10:28:11

<pre> 
p { 
    margin: 0px; 
} 
.economics { 
    height: 100px; 
    width: 100px; 
    border: 2px solid black; 
    display: table; 
    vertical-align: middle; 
} 
.economics p:hover { 
    background-color: grey; 
    display: table; 
    height: calc(100% - 0em); 
    width: 100%; 
    vertical-align: middle; 
} 
.workforce { 
    height: 100px; 
    width: 100px; 
    border: 2px solid black; 
    display: table; 
    vertical-align: middle; 
} 
.workforce p:hover { 
    background-color: grey; 
    display: table; 
    height: calc(100% - 0em); 
    width: 100%; 
    vertical-align: middle; 
} 
</pre>

出典

2017-03-24 10:53:14

...あなたもそれを確認することができます参照してください。 –

他のベースをカバーするだけで、単純にjQueryを使用して.hover（）メソッドを使用してこの問題を解決できます。

  <script type="text/javascript"> 
      $(".workforce").hover(function() { 
       $(".text-info").html("The workforce is amazing."); 
      }, function() { 
       $(".text-info").html(""); 
      }); 

      $(".economics").hover(function() { 
       $(".text-info").html("I love the economy."); 
      }, function() { 
       $(".text-info").html(""); 
      }); 

     </script>

あなた<body>の下部にこれを入れて、それが動作するはずです。

チェック：https://jsfiddle.net/tww259xe/

出典

2017-03-24 11:32:49

あなたは本当に純粋なCSSのソリューションが必要な場合は、指定したマークアップを持つ唯一の現実的な選択肢は~一般兄弟セレクタになります。その警告は、兄弟がに従っている必要があります。のメインセレクタに従うので、divを並べ替える必要があります。 CSSはそのようになります。

.workforce:hover ~ .text-info #workforce { 
    display: block; 
} 
.economics:hover ~ .text-info #economics { 
    display 
}

は、名前のホバーは、ボックスが灰色になりますときに私はちょうどそれを作ったfiddle

出典

2017-03-24 15:40:48 sn3ll

別のdivにカーソルを置くと、divにテキストが表示される

答えて

関連する問題