Jquery 在网格引导（仅限chrome）中平移悬停第一个图像时图像消失
我一直在努力寻找这种奇怪行为的根源，但到目前为止我还不走运 我的问题是： 在chrome中（在firefox中效果很好），当我将鼠标悬停在由3x2个图像组成的网格中的第一个图像上（）时，图像和周围的背景图像在翻译时会消失。完成后，图像重新显示。这只发生在chrome中，当向下滚动超过特定点时（要测试，只需一直向下滚动） 到目前为止，我找到的唯一解决办法是关闭翻译，这不是理想的，但更像是最后的手段 有人能告诉我我做错了什么吗 HTML：Jquery 在网格引导（仅限chrome）中平移悬停第一个图像时图像消失,jquery,html,css,twitter-bootstrap,Jquery,Html,Css,Twitter Bootstrap,我一直在努力寻找这种奇怪行为的根源，但到目前为止我还不走运 我的问题是： 在chrome中（在firefox中效果很好），当我将鼠标悬停在由3x2个图像组成的网格中的第一个图像上（）时，图像和周围的背景图像在翻译时会消失。完成后，图像重新显示。这只发生在chrome中，当向下滚动超过特定点时（要测试，只需一直向下滚动） 到目前为止，我找到的唯一解决办法是关闭翻译，这不是理想的，但更像是最后的手段 有人能告诉我我做错了什么吗 HTML： <!DOCTYPE html> <html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="SHIELD - Free Bootstrap 3 Theme">
<meta name="author" content="Carlos Alvarez - Alvarez.is - blacktie.co">
<title>Peter Streef</title>
<!-- Bootstrap core CSS -->
<link href="test/assets/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="test/assets/css/main.css" rel="stylesheet">
<link rel="stylesheet" href="test/assets/css/icomoon.css">
<link href="test/assets/css/animate-custom.css" rel="stylesheet">
<link rel="icon" type="image/png" href="test/assets/img/favicon.png">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,300,700' rel='stylesheet' type='text/css'>
<script src="test/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="test/assets/js/modernizr.custom.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="test/assets/js/html5shiv.js"></script>
<script src="test/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-offset="0" data-target="#navbar-main">
<!-- ==== SECTION DIVIDER2 ==== -->
<section id="photography" class="section-divider textdivider divider2">
<div class="container">
<h1>Photography</h1>
<hr>
</div>
<!-- container -->
</section>
<!-- section -->
<!-- ==== photography ==== -->
<div class="container" >
<br>
<div class="row">
<br>
<h1 class="centered">Photos I made</h1>
<hr>
<br>
<br>
</div>
<!-- /row -->
<div id="photography_row" class="row"></div>
<!-- /row -->
<br>
<br>
</div>
<!-- /container -->
<script>
$(document).ready (function () {
$.ajax ({
type: 'GET',
url: 'show_photos_test.php',
data: '',
success: function (msg) {
if (msg) {
document.getElementById("photography_row").innerHTML = msg;
}
else {
document.getElementById("photography_row").innerHTML = "Error in loading photos.";
}
}
});
});
</script>
<script type="text/javascript" src="test/assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="test/assets/js/retina.js"></script>
<script type="text/javascript" src="test/assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="test/assets/js/smoothscroll.js"></script>
<script type="text/javascript" src="test/assets/js/jquery-func.js"></script>
</body>
</html>
foreach($photos as $photo)
{
$newTitle = wordwrap($photo['title'], 20, "<br />\n");
?>
<!-- PORTFOLIO IMAGE 1 -->
<div class="col-md-4 ">
<div class="grid mask">
<figure>
<img class="img-responsive" src="<?php echo($assets_folder.$photo['image']);?>" alt="">
<figcaption>
<h5><?php echo($newTitle);?></h5>
<a data-toggle="modal" href="#photo_modal_<?php echo($photo['id']);?>" class="btn btn-primary btn-lg">Read more</a>
</figcaption><!-- /figcaption -->
</figure><!-- /figure -->
</div><!-- /grid-mask -->
</div><!-- /col -->
<!-- MODAL SHOW THE PORTFOLIO IMAGE. In this demo, all links point to this modal. You should create
a modal for each of your projects. -->
<div class="modal fade" id="photo_modal_<?php echo($photo['id']);?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><?php echo($photo['title']);?></h4>
</div>
<div class="modal-body">
<p><img class="img-responsive" src="<?php echo($assets_folder.$photo['image']);?>" alt=""></p>
<p><?php echo($photo['description']);?></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<?php
}
.no-touch .mask figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
/*@PS added for touch
.no-touch & no hover and .touch added
*/
.touch .mask figure img
{
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.no-touch .mask figure:hover img,
.mask figure.cs-hover img {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.no-touch .mask figcaption {
height: 50px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.touch .mask figcaption {
height: 50px;
width: 100%;
top: auto;
bottom: 0;
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}
.no-touch .mask figure:hover figcaption,
.mask figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.mask figcaption a {
position: absolute;
top:10px;
bottom: 10px;
right: 30px;
}
抑制
位置：相对来自main.css
处的网格图img
选择器：
.grid figure img {
width: 100%;
display: block;
/* position: relative; */
}
假设它的默认值为：position:static，它就可以正常工作了如果您将拥有许多大型图像，那么您可以尝试在加载图像之前使用css控制布局。您可以编写如下脚本：
<script>
jQuery(document).ready(function($) {
$(".preload").each(loadImages);
function loadImages (i, elem) {
var numItems = $('.preload').length;
for (var i = 0; i < numItems; i++) {
$("#img" + i).each(function(){
var thisSource = $(this).data('src');
$(this).html('<img src="' + thisSource + '" alt=""/>');
});
}
}
});
</script>
<span id="img1" class="preload" data-src="images/portfolio1.jpg"></span>
<span id="img2" class="preload" data-src="images/portfolio2.jpg"></span>
jQuery（文档）.ready（函数（$）{
$（“.preload”）。每个（加载图像）；
函数loadImages（i，elem）{
var numItems=$（'.preload'）.length；
对于（变量i=0；i
这样做的目的是在插入图像之前完成布局css。有很多方法可以做到这一点，但你需要以某种方式在公文包中管理你的图像加载。做一把小提琴。。没有html真的很难理解。@Gaurav我已经添加了所有我认为相关的代码。如果你遗漏了什么，请告诉我@p、 streef在页面和所有图像完成加载后是否会发生这种情况？我唯一能够复制的时间是在图像加载之前清除缓存、刷新并悬停在图像上。装上子弹后，它们就完好无损了。我看到的和MathiasaurusRex一样。它仅在加载图像时才执行此操作。看起来您正在使用1920x1080（！！！！）并缩小其尺寸。试试缩略图大小，看看你是否有更好的表现。我没有你的问题的答案，但我真的很喜欢你的网站！幸运的是这个答案可能不正确——他似乎有一只海森堡。当您右键单击并在Chrome中检查他的元素时，只要打开inspector，问题就会消失。这通常意味着这是图像加载的问题，可能是对空图像触发的变换。@JenniferMichelle。因为我自己无法验证，所以让OP给我们一些反馈。这并没有完全解决问题，但由于某些原因，它的发生率大大降低。添加缩略图后，它就像一个魅力@p、 好极了！谢谢你的反馈！顺便提一下祝贺你的网站真的很棒！