不透明度的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

這是因爲你的錨的懸停和默認<a>應用CSS是一個內聯元素，如果檢查元素你看到居然沒有任何的高度和寬度<a>。

使用display:block在<a>將其轉換爲塊級元素和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:hover .text-content{ 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>