javascript - 悬停时隐藏文本

Question

当出现悬停效果时，我无法隐藏类“portfolio_caption”。我不确定是不是因为悬停效果是基于不透明度的。对于如何实现这一点，我有点迷茫。

请注意，这是纯 CSS 代码，但如果需要，我不介意使用 jQuery/Javascript。

这是 JSFiddle

.portfolio_bg {
      position: relative;
      width: 50%;
    }
    
    .portfolio_image {
      display: block;
      width: 100%;
      height: auto;
    }
    
    .portfolio_overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: rgba(104, 120, 129, 0.5);
    }
    
    .portfolio_bg:hover .portfolio_overlay {
      opacity: 1;
    }
    
    .portfolio_caption {
      color: white;
      font-size: 20px;
      position: absolute;
      bottom: 10%;
      left: 10%;
    }
    .portfolio_caption:hover {
      opacity: 0;
      display: none;
    }
    
    .portfolio_text {
      color: white;
      font-size: 20px;
      position: absolute;
      bottom: 10%;
      left: 10%;
    }

    <a href="#">
    <div class="portfolio_bg">
      <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="portfolio_image">
      <div class="portfolio_caption">This is the text that I want to hide when the mouse is hovered but it doesn't go away!</div>
      <div class="portfolio_overlay">
        <div class="portfolio_text">Hello World and the whole kind of thing goes down!</div>
      </div>
    </div>
    </a>

Answer 1

您需要使用.portfolio_bg 容器的悬停

如果你使用它，它会起作用，

.portfolio_bg:hover  .portfolio_caption 
{
  opacity: 0;
}