html - 将鼠标悬停在另一个 div 中的元素上时如何在一个 div 中显示元素

Question

我有一个 3 列部分，中间一列包含两个文本块 - A 和 B。如果将鼠标悬停在第 1 列中的链接上，我希望块 A 出现。如果将鼠标悬停在第 3 列中的链接上，我希望块 B 出现。
到目前为止，这是我的代码:

.google, .text, .yahoo { width:33% ; display:inline-block ; text-align:center}
.google, .yahoo { background:red }
.text { background:yellow }
.google-text, .yahoo-text { display:none }

.google a:hover .google-text { display:block }
.yahoo a:hover .yahoo-text { display:block }

<div class="container">
    <div class="google"><a href="https://google.com">Google</a></div>
    <div class="text">
        <div class="google-text">I love Google</div>    
        <div class="yahoo-text">I love Yahoo</div>  
    </div>
    <div class="yahoo"><a href="https://yahoo.com">Yahoo</a></div>
</div>

对于我的生活，我无法让它发挥作用。我究竟做错了什么？我正在尝试使用纯 CSS 来做到这一点，如果可能的话，不要使用 javascript。
非常感激任何的帮助。
谢谢!
C

Answer 1

我知道一种你可以在 css CSS Combinator Selectors 我的演示中做到这一切的方法，但它只显示悬停时的一个文本，它只是一个开始https://jsfiddle.net/0stceLa7/

.google a:hover+ .text .google-text, .google-sec {
        display: flex;
        z-index:2;
      }
     .yahoo a:hover+ .text .yahoo-text, .yahoo-sec {
        display: flex;
        z-index:1;
      }

这一切都必须在一个 div 下，然后使用 Adjacent 或 General 兄弟组合器/选择器