我的问题已在标题中说明。我想我做的都很正确。但是,不会出现过渡效果。请注意,实际上会出现悬停效果,并且会出现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> </a>
<span class="greyCaption"> 22</span>
<a href="#" class="icon"> <span class="fa fa-thumbs-down fa-lg"></span> </a>
</div>
<!--like caption -->
</div>
&#13;
答案 0 :(得分:4)
这是因为您在悬停锚点时应用了css,默认情况下<a>
是一个内联元素,如果检查元素,则表明实际上没有<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> </a>
<span class="greyCaption"> 22</span>
<a href="#" class="icon"> <span class="fa fa-thumbs-down fa-lg"></span> </a>
</div>
<!--like caption -->
</div>
答案 1 :(得分:0)
使用此
.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;
}
&#13;
<!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> </a>
<span class="greyCaption"> 22</span>
<a href="#" class="icon"> <span class="fa fa-thumbs-down fa-lg"></span> </a>
</div> <!--like caption -->
</div>
</body>
</html>
&#13;