當鼠標懸停在另一個div上時，使文本顯示爲div

我有一個「空白」div，當我將鼠標懸停在某個元素上時，我想填充文本。對於我們懸停的每個元素，文本應該不同。當鼠標懸停在另一個div上時，使文本顯示爲div

這裏的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>

我只用CSS嘗試，設置P公司爲display：block懸停在.economics或.workforce時，沒有結果。

任何幫助將不勝感激，謝謝！

來源

2017-03-24 Antezo

使用CSS，只能說明你在徘徊它們的父元素，像這樣的內容：

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

如果#economics裏面.economics這將工作。

在這種情況下，您可以將#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

回答

相關問題