0
我搜索了全部内容，发现了一些解决方案，但是我无法在我的应用程序中使用它。我试图做的是在图像悬停时显示黑色图层，然后显示文本。理想情况下，我希望文本具有看起来像按钮的边框。当鼠标悬停在图像上时，用文本获得黑色覆盖图
我希望这与我的悬停秤一起工作。出于某种原因，在我的实际页面上，当将鼠标悬停在图像上时，它除了缩放之外什么都没做。它不会将父div变成灰色。
我在做什么错？
$('.home-img-block').find('img').each(function() {
var imgClass = (this.width/this.height > 1) ? 'wide' : 'tall';
console.log(imgClass);
$(this).addClass(imgClass);
});#home-img-blocks {
\t width: 100%;
\t height: 600px;
}
.home-img-block {
\t width: 33.33%;
\t /*height: 100%;*/
\t display: inline-block;
\t overflow: hidden;
\t cursor: pointer;
}
.home-img-block:after {
content: attr(data-content);
color:#fff;
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
.home-img-block:hover:after {
opacity:1;
}
.home-img-block img{
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.home-img-block:hover img{
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
\t background: rgba(0,0,0,0.3);
\t width: 33.33%;
\t max-height: 100%;
}
.home-img-block img.wide {
\t max-width: 100%;
max-height: 100%;
\t height: auto;
}
.home-img-block img.tall {
\t max-width: 100%;
max-height: 100%;
\t width: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="home-img-blocks">
\t <div data-content="FIND OUT MORE" class="home-img-block"><img src="http://optimumwebdesigns.com/images/test1.jpg"></div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test2.jpg">
</div><div class="home-img-block"><img src="http://optimumwebdesigns.com/images/test3.jpg"></div>
</div>
这是完美的，除了它似乎黑色叠加放大图像一点点。我将如何防止？ – Becky
@Becky你不想在悬停时缩放图像？或缩小一点点？ –
选中此https://jsfiddle.net/Jinukurian7/rb7vdacu/2/ –