Question

当链接悬停时，我希望图像显示在我的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();
            });

        }

Answer 1

问题是100％匹配容器的400px，而不是剩余空间的100％。如果你知道你将用于链接行的高度，你可以简单地从400减去你的图像高度。即<img width="100%" height="380px" ... >或类似的东西。或者，如果您不关心要切断的图像，可以将溢出设置为隐藏在容器上。

否则，您需要为容器使用flexbox，并根据可用空间使图像伸展。

我附加到我的div的图像位于我的div之外

1 个答案: