html - 使用 CSS 在 Hover 上显示文本

Question

我有一些链接，当我将鼠标悬停在上面时，应该会在左侧栏中显示相应的文本。我知道这可以用 jQuery 来实现，但是我试图用 css 来实现这个，例如只使用代码 :hover 来显示 block 元素。当我将鼠标悬停在链接上时，它似乎不起作用。我错过了什么？下面是代码。

.left-fill {
  background: #0000006b;
  height: 100vh;
}

.right-fill {
  background: pink;
  height: 100vh;
}

.vc_col-sm-6 {
  width: 50%;
  float: left;
}

.pivot-nav {
  list-style: none;
  font-family: 'Montserrat';
  text-align: left;
}

.pivot-nav li a {
  font-size: 1.6rem;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  color: #fff;
  text-decoration: none;
  line-height: 40px;
}

.pivot-nav li a.default-underline::after,
.pivot-nav li a:hover::after {
  width: 100%;
}

.pivot-nav:hover a.default-underline:not(:hover)::after {
  width: 0;
}

.pivot-nav li a::after {
  bottom: 0;
  content: "";
  display: block;
  height: 4px;
  position: absolute;
  background: #fff;
  transition: width 0.3s ease 0s;
  width: 0;
}

.home-o-c,
.home-c-f,
.home-i-c,
.home-c-u {
  display: none;
}

.our-company {
  clear: both;
  display: block;
  height: 50vh;
}

.cf2 {
  clear: both;
  display: block;
  height: 50vh;
}

.c-f:hover.home-c-f {
    display:block;
}

<div class="left-fill text-left wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <p class="home-i-t">TEXT One</p>
    <p class="home-o-c">TEXT One</p>
    <p class="home-c-f">TExt for C f.</p>
    <p class="home-i-c">Some more text fo i c.</p>
    <p class="home-c-u">Get in touch </p>

  </div>
</div>



<div class="home-fill right-fill text-right wpb_column vc_column_container vc_col-sm-6">

  <div class="wpb_wrapper">
    <ul class="pivot-nav">
      <li class="pivot-nav-item"><a class="o-c default-underline" href="#" data-toggle="my-scrollspy-2">O C</a></li>
      <li class="pivot-nav-item"><a class="c-f" href="#" data-toggle="my-scrollspy-2">C F</a></li>
      <li class="pivot-nav-item"><a class="i-c" href="#" data-toggle="my-scrollspy-2">I C</a></li>
      <li class="pivot-nav-item" data-toggle="my-scrollspy-2"><a class="c-u" href="#">C U</a></li>
    </ul>

  </div>
</div>

Answer 1

还有另一种使用 CSS 的方法。

*{margin: 0; padding: 0;}
.text_span {background: #0000006b; height: 100vh; display:none; width:  50%; position: absolute; left: 0; top: 0; }
.pivot-nav{float: right; width: 50%; background: pink; height: 100vh; list-style: none; box-sizing: border-box; padding: 20px 40px; }
.pivot-nav-item a{display: block; color: #fff; font-size: 1.6rem; font-weight: 700; text-transform: uppercase; display: inline-block; text-decoration: none; line-height: 40px; }
.pivot-nav-item a:hover + span{display: block;}

<div class="row">
        <div class="wpb_wrapper">
            <ul class="pivot-nav">
                <li class="pivot-nav-item">
                  <a class="o-c"  href="#">O C</a>
                  <span class="text_span">TEXT O-C</span>
                </li>
                <li class="pivot-nav-item">
                  <a class="c-f"  href="#">C F</a>
                  <span class="text_span">TEXT C-F</span>
                </li>
                <li class="pivot-nav-item">
                  <a class="i-c" href="#">I C</a>
                  <span class="text_span">TEXT I-C</span>
                </li>
                <li class="pivot-nav-item">
                  <a class="c-u" data-text="TEXT C-U" href="#">C U</a>
                  <span class="text_span">TEXT C-U</span>
                </li>
            </ul>
        </div>
    </div>