个人中心
gpt4 book ai didi

javascript - FadeOut 伪元素

转载 作者：太空宇宙 更新时间：2023-11-03 21:17:44 29 4
gpt4 key购买 nike

我有一个包含图像和 .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>

最佳答案

使用悬停伪选择器并定位 :before 伪选择器使用不透明度在状态和过渡之间切换以使其动画化

.img-container:hover a:before {
        content: "";
        opacity:0;
      -webkit-transition: all 1s; /* Safari */
        transition: all 1s;
    }

@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;
    opacity:1;
    background: url('http://feanor.cz/public/img/web/img-cover.png');
}
.img-container:hover a:before {
    content: "";
    opacity:0;
  -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
}
/*.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>

关于javascript - FadeOut 伪元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40672460/

29 4 0
文章推荐： python - 如何让 VS code 与 Pybuilder python 项目一起使用？
文章推荐： css - 水平线但底部有阴影
文章推荐： c# - OpenCV:.Net C# 中的 src.size() == dst.size() && dst.type() == CV_32FC1 错误
文章推荐： html - 如何更改悬停父元素上的 css 属性？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com