Question

我试图在图片上叠加图片。代码工作正常，但问题是我在叠加层顶部有另一个div，我希望叠加层保留，即使你将鼠标悬停在div

HTML

＆＃13;

.overlay {
  position: relative;
}
.overlay img {
  width: 100%;
  vertical-align: top;
}
.overlay:after,
.overlay:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.overlay:after {
  content: '\A';
 width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.overlay:hover:after,
.overlay:hover:before {
  opacity: 1;
}
.top-icons {
  position: absolute;
  z-index: 10;
  margin: 5px 0 0 5px;
  width: 100%;
  display: none;
}
.post-img:hover .top-icons {
  display: block;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
  <div class="col-box">
    <div class="post-img">
      <div class="top-icons"><a href="">Test</a> Some text gose here</div>
      <a href="#">
        <div class="overlay">
          <img src="http://placehold.it/300x300">
        </div>
      </a>
    </div>
    <div class="other">

    </div>
    <!--other-->
  </div>
  <!--col-box-->
</div>
<!--col-lg-3 col-md-4 col-xs-6-->

＆＃13;

即使您将鼠标悬停在div top-icons

上，我也希望叠加功能正常工作

请查看jsfiddle。

Answer 1

在css中添加以下内容：

div.post-img:hover .overlay:after, div.post-img:hover .overlay:before {
    opacity:1;
}

Answer 2

通过overlay

的top-icons父级来修改你的HTML

.overlay{
  position: relative;
}
.overlay img {
  width: 100%;
  vertical-align: top;
}
.overlay:after,
.overlay:before {
  position: absolute;
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}
.overlay:after {
  content: '\A';
 width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.overlay:hover:after,
.overlay:hover:before {
  opacity: 1;
}
.top-icons {
  position: absolute;
  z-index: 10;
  margin: 5px 0 0 5px;
  width: 100%;
  display: none;
}
.post-img:hover .top-icons {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
      <div class="col-box">
        <div class="post-img">
          <div class="overlay">
            <div class="top-icons"><a href="">Test</a> Some text gose here</div>
            <a href="#">
              <img src="http://placehold.it/300x300">
            </a>
          </div>
        </div>
        <div class="other">
        </div>
        <!--other-->
      </div>
      <!--col-box-->
    </div>
    <!--col-lg-3 col-md-4 col-xs-6-->
  </div>
</div>

Answer 3

在CSS规则中 var fs = require('fs'); var unzip = require("unzip2"); var tar = require('tar'); var zlib = require('zlib'); var path = require('path'); var mkdirp = require('mkdirp'); // used to create directory tree var request = require("request"); var http = require('http'); var zip = require("machinepack-zip"); for (var i = 0; i < _diff.length; i++) { request(constants.base_patch +"example.zip") request = http.get({ host: 'localhost', path: '/update/patchs/' + "example.zip", port: 80, headers: { 'accept-encoding': 'gzip,deflate' } }); request.on('response', (response) => { var output = fs.createWriteStream(__dirname + "/tmp/" +"example.zip"); switch (response.headers['content-encoding']) { // or, just use zlib.createUnzip() to handle both cases case 'gzip': response.pipe(zlib.createGunzip()).pipe(unzip.Extract({ path: __dirname })); break; case 'deflate': response.pipe(zlib.createInflate()).pipe(unzip.Extract({ path: __dirname })); break; default: response.pipe(output); break; } }) request.on('close', function(){ zip.unzip({ source: __dirname + "/tmp/" + "example.zip", destination: __dirname, }).exec({ error: function (err){ alert("error") }, success: function (){ //delete temp folder content after finish uncompress }, }); }) }

只需使用.overlay:hover:after, .overlay:hover:before

进行更改即可

图像叠加与CSS问题

3 个答案: