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/ –