懸停內容也涵蓋同級div

Question

我有三個圖像處於inline-block狀態。 每當我將鼠標懸停在這些圖像上時，我都希望僅在圖像上方出現 黑色覆蓋的不透明度。 我重新設計了代碼，將對圖像的描述放在div.home-image-blocks ，以便能夠在不同的視口中對其進行修改。

問題：當將鼠標懸停在img時，我不確定為什么黑色覆蓋覆蓋了div.home-img-wording-blocks塊容器中的內容。 我還將max-height設置為100％並overflow: hidden 。

有人看到我在做什么錯了嗎，因為懸停效果顯示在下面的內容上，並且懸停使圖像可以超出正常視點？

 $('.home-img-block img').addClass(function() { return (this.width / this.height > 1) ? 'wide' : 'tall'; }); 

 #home-img-block-section { width: 100%; height: 900px; /*changed*/ } #home-img-blocks { width: 100%; height: 750px; } .home-img-block { width: 33.33%; /*height: 100%;*/ float: left; display: inline-block; overflow: hidden; cursor: pointer; position: relative; } .home-img-block:hover .overlay { background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .home-img-block:after { content: attr(data-content); color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; -webkit-transition: all 0.5s; border: 1px solid #fff; padding: 20px 25px; text-align: center; } .home-img-block:hover:after { opacity: 1; } .home-img-block img { display: block; -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); background: rgba(0, 0, 0, 0.3); width: 33.33%; max-height: 100%; overflow: hidden; } .home-img-block img.wide { max-width: 100%; max-height: 100%; height: auto; width: 100%; } .home-img-block img.tall { max-width: 100%; max-height: 100%; width: auto; } #home-img-block-wording-container { width: 100%; height: 300px; } .home-img-wording-blocks { width: 100%; /* changed was 33%*/ height: 100%; text-align: center; display: inline-block; vertical-align: top; } .home-img-wording-block-title { padding-top: 30px; font-size: 1.7em; } .home-img-wording-block-description { padding: 25px 50px 0 50px; font-size: 1.1em; color: #5d5d5d; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-block-section"> <div id="home-img-blocks"> <div data-content="FIND OUT MORE" class="home-img-block"> <img src="http://optimumwebdesigns.com/images/test1.jpg"> <div class="overlay"></div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">WEB DESIGN</div> <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div> </div> </div> <div data-content="FIND OUT MORE" class="home-img-block"> <img src="http://optimumwebdesigns.com/images/test2new.jpg"> <div class="overlay"></div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">ECOMMERCE</div> <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div> </div> </div> <div data-content="FIND OUT MORE" class="home-img-block"> <img src="http://optimumwebdesigns.com/images/test3new.jpg"> <div class="overlay"></div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">MARKETING STRATEGIES</div> <div class="home-img-wording-block-description">MARKETING STRATEGIES</div> </div> </div> </div> </div> 

Answer 1

您需要將img和div.overlay單獨包裝到它們自己的div中。 根據所提供的代碼，overlay元素相對於div.home-img-block元素絕對定位， div.home-img-block元素也容納div.homve-img-wording-blocks ，因此，當設置height:100% ，它會表示div.home-img-block元素的完整高度（還包括描述文本所占的高度）。

同樣， img也從父對象導出其高度，因此max-height: 100%表示它可以擴展到填滿整個父對象的高度（包括說明）。 但是應用於元素的比例變換僅將其高度增加了25％，因此其縮放高度不超過父容器的高度，因此不會溢出。

當您將img和.overlay放入它們自己的容器元素時，它們的高度不是基於.home-img-block （包括描述文本）得出的。 由於我們尚未在此wrapper元素上顯式設置任何高度，因此它獲得的高度足以容納內容，因此覆蓋層和圖像不會溢出到描述所占據的區域。

 $('.home-img-block img').addClass(function() { return (this.width / this.height > 1) ? 'wide' : 'tall'; }); 

 #home-img-block-section { width: 100%; height: 900px; } #home-img-blocks { width: 100%; height: 750px; } .home-img-block { width: 33.33%; float: left; display: inline-block; overflow: hidden; position: relative; } .home-img-container { position: relative; overflow: hidden; cursor: pointer; } .home-img-container:hover .overlay { background: rgba(0, 0, 0, 0.6); width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .home-img-container:after { content: attr(data-content); color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; border: 1px solid #fff; padding: 20px 25px; text-align: center; } .home-img-container:hover:after { opacity: 1; } .home-img-block img { display: block; transition: all 1s ease; } .home-img-container:hover img { transform: scale(1.25); background: rgba(0, 0, 0, 0.3); width: 33.33%; max-height: 100%; overflow: hidden; } .home-img-block img.wide { max-width: 100%; max-height: 100%; height: auto; width: 100%; } .home-img-block img.tall { max-width: 100%; max-height: 100%; width: auto; } #home-img-block-wording-container { width: 100%; height: 300px; } .home-img-wording-blocks { width: 100%; height: 100%; text-align: center; display: inline-block; vertical-align: top; } .home-img-wording-block-title { padding-top: 30px; font-size: 1.7em; } .home-img-wording-block-description { padding: 25px 50px 0 50px; font-size: 1.1em; color: #5d5d5d; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="home-img-block-section"> <div id="home-img-blocks"> <div class="home-img-block"> <div data-content="FIND OUT MORE" class='home-img-container'> <img src="http://optimumwebdesigns.com/images/test1.jpg"> <div class="overlay"></div> </div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">WEB DESIGN</div> <div class="home-img-wording-block-description">The OD team can see your web design visions brought to life, creating a site that promotes your uniqueness through specific functionalities and features.</div> </div> </div> <div class="home-img-block"> <div data-content="FIND OUT MORE" class='home-img-container'> <img src="http://optimumwebdesigns.com/images/test2new.jpg"> <div class="overlay"></div> </div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">ECOMMERCE</div> <div class="home-img-wording-block-description">Custom built solutions catered towards you end goal.</div> </div> </div> <div class="home-img-block"> <div data-content="FIND OUT MORE" class='home-img-container'> <img src="http://optimumwebdesigns.com/images/test3new.jpg"> <div class="overlay"></div> </div> <div class="home-img-wording-blocks"> <div class="home-img-wording-block-title">MARKETING STRATEGIES</div> <div class="home-img-wording-block-description">MARKETING STRATEGIES</div> </div> </div> </div> </div> 

Answer 2

element.width和element.height不是真實屬性，並且每個屬性都未定義

嘗試

$('.home-img-block img').addClass(function() {
  return ($(this).width() / $(this).height() > 1) ? 'wide' : 'tall';
});