我附加到我的div的圖像位於我的div的外側

-2

我想要一個圖像出現在我的div當一個鏈接懸停。我得到了圖像出現，但它出現在我的容器外面...有人可以看到我的代碼有什麼問題嗎？我附加到我的div的圖像位於我的div的外側

<div class = "container-fluid categories"> 
     <div class = "row"> 
      <div class = "col-sm-12 text-center links"> 
        <a class = "nav-all" href = ""> 
         All 
        </a> 
        <a class = "nav-nature" href = ""> 
         Nature 
        </a> 
        <a class = "nav-building" href = ""> 
         Buildings & Street Life 
        </a> 
        <a class = "nav-fashion" href = ""> 
         Fashion 
        </a> 
        <a class = "nav-food" href = ""> 
         Food 
        </a> 
        <a class = "nav-abstract" href = ""> 
         Abstract 
        </a> 
        <a class = "nav-covers" href = ""> 
         Artist Covers 
        </a> 

     </div> 
    </div> 
</div> 

.categories { 
height: 400px; 
width: 100%; 
border: 1px solid white;} 


function imageHover() { 
      $(".nav-all").mouseenter(function(){ 
       $('<img src = "cover.jpg" width = "100%" height = "100%" /img>').hide().appendTo(".categories").fadeIn("slow"); 
      }); 
      $(".nav-all").mouseleave(function(){ 
       $("img").remove(); 
      }); 

     }

來源

2017-05-24 Breevie

你能爲我們提供一個小提琴嗎？ – Swellar

@Swellar您需要的所有東西都在提供的代碼中。 jQuery中的HTML無效。 – Rob

@Rob我看到了，那麼我想它是 – Swellar

問題是100％與容器的400像素相匹配，而不是100％的剩餘空間。如果您知道您將用於鏈接行的高度，則可以簡單地從400中爲圖像高度減去該高度。即<img width="100%" height="380px" ... >或類似的東西。或者，如果您不關心要切斷的圖像，則可以將溢出設置爲隱藏在容器上。

否則，您需要爲容器使用flexbox，並根據可用空間使圖像伸展。

來源

2017-05-24 02:53:52 RLHawk

真棒！非常感謝！！你是一個救生員 – Breevie

你需要在這裏發佈你的代碼，而不是第三方的網站，明天可以改變或消失，以幫助未來的人。另外，''標籤沒有結束斜線。 – Rob

@Rob謝謝！我已經刪除了jsfiddle的鏈接，因爲我的回答沒有必要。 – RLHawk

我附加到我的div的圖像位於我的div的外側

回答

相關問題