Question

var data = [{
  src: "..",
  title: "Image 1"
}, {
  src: "..",
  title: "Image 2"
}, {
  src: "..",
  title: "Image 3"
}];


$(document).ready(function() {
  var $thumbs = $(".thumbnails");

  // dynamically add thumbnails to page
  for (var i = 0; i < data.length; i++) {
    $thumbs.append('<a href="#" class="thumbnail" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block"></a>');
  }
});

<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<body>
  <!--thumbnail section-->
  <section class="container">
    <div class="row add-bottom text-center thumbnails">
    </div>
  </section>

</body>

我希望在将鼠标悬停在给定代码的图像缩略图上时应用不透明度和一些文本，如下图所示。我将如何做同样的事情？

Answer 1

您可以将伪元素::after与position:relative / absolute

一起使用

＆＃13;

var data = [{
  src: "//lorempixel.com/100/100",
  title: "Image 1",
  id: "1"
}, {
  src: "//lorempixel.com/100/100",
  title: "Image 2",
  id: "2"
}, {
  src: "//lorempixel.com/100/100",
  title: "Image 3",
  id: "3"
}];


$(document).ready(function() {
  var $thumbs = $(".thumbnails");

  // dynamically add thumbnails to page
  for (var i = 0; i < data.length; i++) {
    $thumbs.append('<div class="col-xs-12"><a id="a' + data[i].id + '" href="#" class="thumbnail" alt="' + data[i].title + '"><img src="' + data[i].src + '" class="img-responsive center-block"></a></div>');
  }
});

＆＃13;

a {
  position: relative;
  display: inline-block !important
  /* this might be not necessary */
}
a:hover::after {
  content: "";
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
  color: white;
}
#a1:hover::after {
  content: "I am a Title"
}
#a2:hover::after {
  content: "I am a Text"
}
#a3:hover::after {
  content: "I am Nothing"
}

＆＃13;

<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap.js@*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<!--thumbnail section-->
<section class="container">
  <div class="row add-bottom text-center thumbnails">
  </div>
</section>

＆＃13;

Answer 2

.thumbnail span {

opacity:0;

z-index:0;

position:absolute;

top:50%

}

.thumbnail span：悬停{ 不透明度：1;

z-index:1;

 position:absolute;

top:50%

-webkit-transition: opacity .25s ease-in-out .0s;

transition: opacity .25s ease-in-out .0s;

color:red

}

在标记中添加范围

如何在动态添加缩略图上悬停鼠标时添加样式？

2 个答案: