在悬停时隐藏文字

Question

我无法隐藏课程＆＃34; portfolio_caption＆＃34;当悬停效果发生时。我不确定它是否是因为悬停效果是基于不透明度的。关于如何实现这一点，我有点迷失。

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

这里是 JSFiddle

＆＃13;

＆＃13;

.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%;
    }

＆＃13;

    <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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

如果你使用它，它可以工作，

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

Answer 2

使用容器悬停

.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_bg:hover .portfolio_caption { /*<-- */
      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 3

将此添加到您的css中，当您将鼠标悬停在背景图片上时应将其隐藏：

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

检查更新的JSFiddle here

Answer 4

添加

.portfolio_bg:hover .portfolio_caption{
    display:none;
}

在css文件中。