不透明的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将其转换为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: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>