不透明度のCSSトランジションが動作しません

Question

私の問題は既にタイトルに記載されています。私はすべてを正しくしたと思う。ただし、トランジション効果は現れません。ホバー効果は実際に表示され、h5タグ内の書き込みは表示されますが、トランジション効果はありません。それは私を夢中にさせている、アドバイスは大いに感謝されます。

a.jobBoxLink { 
 
    color: #B2B2B2; 
 
    -moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    -webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow: 3px 0 0px 0 #F2F2F2; 
 
} 
 
.jobBoxLink:hover { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: block; 
 
    background #B2B2B2; 
 
} 
 
.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 5000ms; 
 
    -moz-transition: opacity 5000ms; 
 
    -o-transition: opacity 5000ms; 
 
    transition: opacity 5000ms; 
 
} 
 
a.jobBoxLink:hover .text-content { 
 
    opacity: 1; 
 
} 
 
.books { 
 
    -moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    -webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow: 0 0 8px 3px #F2F2F2; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    padding-left: -100px; 
 
    alignment-adjust: central; 
 
}

<div class="col-sm-4 col-md-2 BoxCol"> 
 
    <a href="#" class="jobBoxLink "> 
 

 
    <div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
    </div> 
 
    <!-- Job boxes --> 
 
    </a> 
 
    <div class="caption"> 
 
    <a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a> 
 
    <span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> 
 
    <!--like caption --> 
 
</div>

Answer 1

これはアンカーのホバーのCSSを適用しているためであり、デフォルト<a>でインライン要素であり、検査かどうかを確認要素が<a>のない高さと幅は実際には存在しません。

ブロックするために、それを変換する<a>で使用display:block要素とCSSが細かい

a.jobBoxLink { 
 
    color: #B2B2B2; 
 
    display:block; 
 
    -moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    -webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow: 3px 0 0px 0 #F2F2F2; 
 
} 
 
.jobBoxLink:hover { 
 
    text-decoration: none; 
 
    color: black; 
 
    display: block; 
 
    background #B2B2B2; 
 
} 
 
.text-content { 
 
    background: rgba(0, 0, 0, 0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    -webkit-transition: opacity 5000ms; 
 
    -moz-transition: opacity 5000ms; 
 
    -o-transition: opacity 5000ms; 
 
    transition: opacity 5000ms; 
 
} 
 
a.jobBoxLink:hover .text-content { 
 
    opacity: 1; 
 
} 
 
.books { 
 
    -moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    -webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow: 0 0 8px 3px #F2F2F2; 
 
    border-radius: 5px; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    padding-left: -100px; 
 
    alignment-adjust: central; 
 
}

<div class="col-sm-4 col-md-2 BoxCol"> 
 
    <a href="#" class="jobBoxLink "> 
 

 
    <div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
    </div> 
 
    <!-- Job boxes --> 
 
    </a> 
 
    <div class="caption"> 
 
    <a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp;</a> 
 
    <span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> 
 
    <!--like caption --> 
 
</div>

Answer 2

使用この

.text-content:hover{opacity : 1;} 

の代わりに、この

に動作します

a.jobBoxLink{ 
 
color: #B2B2B2; 
 
-moz-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
-webkit-box-shadow: 3px 0 0px 0 #F2F2F2; 
 
    box-shadow:  3px 0 0px 0 #F2F2F2; 
 

 
} 
 
.jobBoxLink:hover{ 
 
text-decoration:none; 
 
color: black; 
 
display:block; 
 
background #B2B2B2; 
 
    } 
 

 

 
    .text-content { 
 
background: rgba(0,0,0,0.5); 
 
    color: white; 
 
    cursor: pointer; 
 
    height: 200px; 
 
    position: absolute; 
 
    width: 200px; 
 
     display:block; 
 
    margin:0; 
 
    opacity : 0; 
 
-webkit-transition: opacity 2s; 
 
-moz-transition: opacity 2s; 
 
-o-transition: opacity 2s; 
 
transition: opacity 2s; 
 

 
} 
 

 
.text-content:hover{ 
 
    opacity : 1; 
 
    
 
    } 
 

 

 
.books{ 
 
-moz-box-shadow: 0 0 8px 3px #F2F2F2; 
 
-webkit-box-shadow: 0 0 8px 3px #F2F2F2; 
 
    box-shadow:   0 0 8px 3px #F2F2F2; 
 
border-radius: 5px; 
 
height: 200px; 
 
width: 200px; 
 
margin-bottom:10px; 
 
margin-top: 10px; 
 
padding-left: -100px; 
 
alignment-adjust: central; 
 
    }

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="col-sm-4 col-md-2 BoxCol"> 
 
<a href="#" class="jobBoxLink "> 
 

 
<div class="books" style="background-image: url('images/dummy/design.jpg'); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%;"> 
 
     <h5 class="text-content">Place Name</h5> 
 
</div> <!-- Job boxes --> 
 
</a> 
 
<div class="caption"> 
 
<a href="#" class="icon"> <span class="fa fa-thumbs-up fa-lg"></span> &nbsp; </a> 
 
<span class="greyCaption"> 22</span> 
 
    <a href="#" class="icon"> &nbsp;<span class="fa fa-thumbs-down fa-lg"></span> </a> 
 
    </div> <!--like caption --> 
 
    </div> 
 
    </body> 
 
    
 
    </html>