Html 子锚点不侦听不透明度:0

Html 子锚点不侦听不透明度:0,html,css,opacity,Html,Css,Opacity,你好,我在一个html网站工作,我有一个问题。我有公文包部分,每个公文包项目都由背景图片和标题组成。在标题中,我有一个标签,这个标签在我加载页面后不会显示,但在我将其悬停后会显示。问题是,当我把鼠标从这个街区拿出来后,它并没有消失。在css中,浏览器中的属性设置为不透明度:0,但它不会消失 这是我的密码: <div class="portfolio-item item-width big-square design"> <div class="portfolio-bo

你好,我在一个html网站工作,我有一个问题。我有公文包部分,每个公文包项目都由背景图片和标题组成。在标题中,我有一个标签,这个标签在我加载页面后不会显示,但在我将其悬停后会显示。问题是,当我把鼠标从这个街区拿出来后,它并没有消失。在css中,浏览器中的属性设置为不透明度:0,但它不会消失

这是我的密码:

<div class="portfolio-item item-width big-square design">
     <div class="portfolio-box effect-chico">
          <img src="images/Simple-portfolio.jpg" alt="Simple-portfolio"/>
          <div class="portfolio-caption">
               <h2>Silly <span>Chico</span></h2>
               <p class="category">Design</p>
               <a href="#">View more</a>
          </div>
     </div>

请张贴一个例子来说明这个问题。这对我来说很好。是否存在导致此问题的其他样式?
div.effect-chico .portfolio-caption::before,
div.effect-chico p,
div.effect-chico .portfolio-caption a{
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}


 div.effect-chico a{
    padding: 15px 45px;
    text-transform: uppercase;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    border: 1px solid #ffffff;
    outline: none;
    color: #ffffff;
    min-width: 20%;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}

div.effect-chico:hover .portfolio-caption::before,
div.effect-chico:hover p,
div.effect-chico:hover .portfolio-caption a{
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}