儿童锚不听不透明度:0

时间:2015-03-05 19:13:38

标签: html5 css3 opacity

您好我正在使用html网站,我遇到了问题。我有投资组合部分,每个投资组合项目都由背景图片和标题组成。在标题内部我有一个<a>标签,这是我加载页面之后没有显示但是在我悬停它之后显示。问题是,当我将鼠标移出此块后,它不会消失。在css中,浏览器中的属性设置为opacity: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>

并且css:

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);
}

0 个答案:

没有答案