javascript - FadeOut 伪元素-6ren

javascript - FadeOut 伪元素

转载作者：太空宇宙更新时间：2023-11-03 21:17:44

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

文章推荐： python - 如何让 VS code 与 Pybuilder python 项目一起使用？

文章推荐： css - 水平线但底部有阴影

文章推荐： html - 如何更改悬停父元素上的 css 属性？

http - 伪/冒号标题字段的用途
如标题所示，我正在寻找有关伪/冒号 header 字段用途的一些信息，即我想知道为什么我们有第二种类型的 header 字段... 另外 - 我知道在 http2 中使用伪/冒号 header 字段代
深入解析PHP中的(伪)多线程与多进程
(伪)多线程：借助外力利用WEB服务器本身的多线程来处理，从WEB服务器多次调用我们需要实现多线程的程序。 QUOTE: 我们知道PHP本身是不支持多线程的, 但是我们的WEB服务器是支持多线程的
random - 如何实现(伪)硬件随机数生成器
您如何在 HDL (verilog) 中实现硬件随机数生成器？需要考虑哪些选项？这个问题是在self-answer之后格式。鼓励添加答案和更新。最佳答案正如摩根的回答中所指出的，这只会产生一个
css - 伪 :before outside of div
我写了这个CSS: div { width: 500px; height:150px; margin-left:150px; background: lightblue; } div:
java - 将“伪”时间戳存储到数据库中
这是我要解决的问题：从数据库A读取一个字符串，将该字符串转换为Date对象，将Date对象存储到数据库B中。例）数据库A：从数据库A读入日期字符串“ 2015-03-08 02:00:00”，转换为
c++ - 如何在(伪？)运行时迭代可变参数模板包？
我想创建 std::fscanf() 的 sibling (我知道这是一个 C 函数)。所以，我的界面是这样的: template std::size_t ts_scanf(is, format,
sql - 伪 IF/Case 帮助
运行 PostgreSQL 7.x(是的，我正在升级) 问题: 如果没有返回数据，我有三到四个字段需要设置。正在考虑这样的事情 SELECT CASE WHEN default_fie
javascript - 重复无效的用户输入，直到其有效(伪)
出于某种原因，我很难在 JS 中为我的游戏执行以下代码: 假设我们要求用户在棋盘上移动一个棋子。他们可以做的位置是位置A、位置B或位置C。每个位置一次只能容纳一件。否则为无效移动。第一个用户决定
c++ - 霍夫曼编码 - 伪 EOF
我已经毫无问题地编写了霍夫曼树的代码，但现在我希望在文件和树中添加伪 EOF，以便我知道何时停止从文件中读取。我完全掌握了伪 EOF 的概念。我还了解到没有 ASCII 值 > 255 的字符。我
javascript - 伪 :after class 的切换类
给定一个按钮 ::after 当被触发时，伪 :after 类需要有一个类 search-active 切换，为按钮设置背景颜色 .primary .search:after, .primary
自动编号前的 CSS 伪 - 缩进
我想让第一行的文本像第二行一样缩进 (50px)。有什么办法吗？非常感谢! body{ counter-reset: h2counter; } h1{ counter-reset: h2counter
不同继承之前/之后的 CSS 伪
:before 或 :after 这样的伪元素是否可以从父元素的不同属性继承值？在我的例子中，我有一个第三方组件设置其元素运行时的背景颜色...我需要继承该颜色并将其设置为伪元素的边框颜色。最佳答
matlab - Matlab中并行循环中的不同(伪)随机数
在并行循环中请求随机数总是返回相同的伪随机数。我怎样才能避免这种情况？ % workers initialization: if matlabpool('size') == 0 matlabp
c# - 伪 IPv4 正则表达式
假设最大IP可以包含每个“点”括号中的最大数量999，即999.999.999.999 是最大的可用值。我已经在计算器中检查了正则表达式 ([0-9]+.){3}[0-9]。那么，为什么程序抛出运行
c - 很好的介绍(伪)随机数生成
我对随机数生成的概念非常陌生，我需要为用c编写的工作创建自己的算法（内置的随机数生成器对我不起作用）。有人能给我介绍一个很好的主题，这样我就可以理解这个概念了吗？到目前为止，我所发现的一切似乎都是用
algorithm - 寻找一种算法以(伪)随机顺序吐出一系列数字
假设我有一个数字序列:{n, n+1, n+2, ... n+m} 在不提前存储数字的情况下，我想创建一个函数 f()，给定序列 {1,2,3,...m} 将以随机(或至少伪)的方式吐出原始集合随机)
tcp - 伪 Tcp channel
什么是伪 tcp channel ，如何实现？最佳答案伪 TCP 是一种协议(protocol)，它实现了 TCP 的一些思想，以通过不可靠的、基于数据包的接口(interface)提供可靠的数据
python - 以(伪)随机顺序从大列表中高效地生成元素
我正在尝试展开一些嵌套循环，以牺牲内存为代价(可能)获得更好的性能。在我的场景中，我最终会得到一个包含大约 3 亿个元素(元组)的列表，我必须以(或多或少)随机顺序产生这些元素。在这个数量级上，ra
php - 生成(伪)随机字母数字字符串
如何在 PHP 中生成(伪)随机字母数字字符串，例如:'d79jd8c'？最佳答案首先创建一个包含所有可能字符的字符串: $characters = 'abcdefghijklmnopqrstu
c++ - 如何获得两个(伪)随机但彼此不同的容器迭代器/元素？
我有一段代码可以为玩家生成迷你任务。这很简单，要获得两个不同的点(起点和终点)，我有一个如下所示的算法: std::vector missions; missions.push_bac

太空宇宙

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - FadeOut 伪元素