【发布时间】：2016-11-18 08:30:55
【问题描述】：
我有一个带有图像和.png 纹理的主页，这是每个图像上的伪元素。我需要这个.png 纹理到FadeOut 悬停。按原样配置后，我该如何实现该功能？还是通过更改当前设置更容易做到这一点？
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*HEADER*/
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding: 70px 0 70px 0;
}
@media (min-width: 1200px) {
.container{
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
}
.top-buffer {
margin-top: 25px;
}
/*IMG OVERLAY*/
.img-container a {
display: block;
position: relative;
}
.img-container a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('http://feanor.cz/public/img/web/img-cover.png');
}
/*.img-container a:hover:before {
display: none;
}*/
/*DROPDOWN*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #161616;
}
/*IMAGES*/
.masonry-container {
padding: 0;
}
.item {
padding: 3px;
}
.item img {
max-width: 100%;
}
/*CONTACTS*/
.contact_photo img {
max-width: 100%;
}
.contact {
color: #aaa;
}
.contact a {
color: #aaa;
}
.contact a:hover {
color: #fff;
}
.contact img {
margin-top: 3px;
margin-bottom: 10px;
}
.contact p {
font-size: 12pt;
}
/*FOOTER*/
#footer-bottom {
min-height: 30px;
line-height: 30px;
width: 100%;
color: #777;
}
#footer-bottom > li > i {
margin-left: -5px;
}
.copyright {
padding-top: 15px;
}
#email_footer {
padding-top: 15px;
}<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i>
</a>
</li>
<li>
<p>lybvit@gmail.com</p>
</li>
</ul>
</div>
</div>
</body>【问题讨论】：
-
伪元素（
::after，::before）是 CSS 的东西，它们不是 DOM 的一部分，只能由 JavaScript 操作。
标签： javascript jquery html css hover