我的
css/main.css
文件正确链接到我的 index.html
文件,并且里面的所有 CSS 代码都适用于我的所有 HTML 元素。
但是,我试图获取一个图像,当鼠标悬停在该图像上时显示信息,但该图像不起作用 - CSS 未被识别,我认为这些类存在一些问题。
.box {
overflow: hidden;
position: relative;
}
.box:before {
content: "";
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(177, 208, 113, 0.8);
opacity: 0;
transition: all 300ms ease-in-out 0s;
}
.box:hover:before {
opacity: 1;
}
<div class="container margintop-50">
<div class="row">
<div class="col-sm-4">
<div class="box">
<img src="img/secgen.jpg" class="img-responsive img-circle">
<div class="boxContent">
<h3 class="title">Sivan Chakravarty</h3>
<span class="post">Secretary General</span>
<ul class="links">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
编辑:它似乎在这里工作得很好。我正在使用 Sublime Text,一切都设置正确;但这在我的浏览器上不起作用。控制台没有错误,什么都没有。
我检查了你的小提琴,发现了一个非常奇怪的问题:你的css中的所有空格字符实际上都不是空格字符,而是字符代码160,它在视觉上就像空格,但浏览器无法识别!
在像记事本++这样的文本编辑器中替换所有这些,你会看到它像代码片段中一样工作!
此外,您还可以看到更新的小提琴在这里。
.box{
position: relative;
overflow: hidden;
}
.box:before{
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(177, 208, 113, 0.8);
opacity: 0;
transition: all 300ms ease-in-out 0s;
}
.box:hover:before{
opacity: 1;
}
.box .boxContent{
width: 100%;
height: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
color: #fff;
z-index: 1;
}
.box .title{
font-size: 20px;
text-transform: uppercase;
position: relative;
top: 18%;
transform: scale(5);
opacity: 0;
transition: all 0.3s ease-in-out 0.1s;
}
.box .post{
display: block;
font-size: 16px;
font-style: italic;
position: relative;
top: 18%;
transform: scale(5);
opacity: 0;
transition: all 0.3s ease-in-out 0.2s;
}
.box:hover .title,
.box:hover .post{
opacity: 1;
transform: scale(1);
}
.box .links{
padding: 0;
list-style: none;
position: relative;
top: 23%;
transform: scale(5);
opacity: 0;
transition: all 0.3s ease-in-out 0.1s;
}
.box:hover .links{
opacity: 1;
transform: scale(1);
transition-delay: 0.3s;
}
.box .links li{
display: inline-block;
margin-right: 20px;
}
.box .links li:last-child{
margin-right: 0;
}
.box .links li a{
display: block;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 50%;
font-size: 20px;
color: #fff;
border: 1px solid #fff;
}
<div class="container margintop-50">
<div class="row">
<div class="col-sm-4">
<div class="box">
<img src="img/secgen.jpg" class="img-responsive img-circle" style="height:250px">
<div class="boxContent">
<h3 class="title">Sivan Chakravarty</h3>
<span class="post">Secretary General</span>
<ul class="links">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
我认为前面应该有 2 个冒号? .box::之前{}
将鼠标悬停在此处进行工作检查...... https://jsfiddle.net/cL361fb0/
.box {
overflow: hidden;
position: relative;
}
.box:before {
content: "";
content: "";
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: rgba(177, 208, 113, 0.8);
opacity: 0;
transition: all 300ms ease-in-out 0s;
}
.box:hover:before {
opacity: 1;
}