悬浮隐藏文本

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>

- Elaine Byene

Answer 1

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

如果您这样做，它会生效。

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

- Varun

Answer 2

使用容器的hover

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

- Theraot

Answer 3

将以下内容添加到您的CSS中，当您将鼠标悬停在背景图像上时，它应该被隐藏：

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

请查看更新的JSFiddle链接

- Muhammad Soliman

Answer 4

只需添加。

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

在CSS文件中。

- M. K Hossain

Answer 5

非常简单，只需在您的 CSS 中添加一行即可。 CSS

    .portfolio_bg:hover .portfolio_caption {
      opacity: 0;
     } // i have added this in code already

.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_bg:hover .portfolio_caption {
      opacity: 0;
    }
    
    .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>

- Rohit Gautam