您好我正在使用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);
}