Question

我需要一些帮助：）

当您将鼠标悬停在投资组合标题上时，在投资组合网站上进行图片预览。每当我将鼠标悬停在页面底部的最后几个标题上时，都会出现一些难看的毛刺/反弹：图像会逃脱网页的界限。有没有办法让方向感知，所以当你将鼠标悬停在最后几个标题上时，图像预览显示在标题上方而不是下方？

HTML：

<ul class="project-list">
    <li>
        <a href="" rel="https://dummyimage.com/600x400/000/fff" class="preview" title="" target="_self">Title Here</a>
    </li>
</ul>

CSS：

#preview {
    position: absolute;
    display: none;
    max-width: 50rem;
    height: auto;
}

JS：

$(document).ready(function(){
    imagePreview();
});

// Configuration of the x and y offsets
this.imagePreview = function(){ 
        xOffset = -30;
        yOffset = 40;   

    var imgHeight = 0;
    var distFromTop = 0;
    var mainImgTop = $(".preview").position();  

    $(".preview").hover(function(e){
        this.t = this.title;
        this.title = "";

        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p id='preview'><img style='display:block;' src='"+ this.rel +"' alt='Image prev' />");

        $("#preview")
        .css("top",(e.pageY - xOffset) + "px")
        .css("left",(e.pageX + yOffset) + "px")
        .fadeIn("slow");
    },

    function(){
        this.title = this.t;
        $("#preview").remove();
    });

    $(".preview").mousemove(function(e){
        $("#preview")
            .css("top",(e.pageY - xOffset) + "px")
            .css("left",(e.pageX + yOffset) + "px");
    });
};

这是一个JSFiddle：https://jsfiddle.net/spacebot/b7h46cfh/

Answer 1

如果您只想在最后X个标题数量上方显示图像，可以使用：nth-last-child（-n + X）（其中X是标题数量）。

检查标题是否是最后一个标题之一并运行另一个动画以显示上面的图像。

//If link is one of the last 3 childs, open above
if($(this).is(':nth-last-child(-n+3)')){ 
    openAbove();
}

JSFiddle示例：

https://jsfiddle.net/447pjobL/8/

有关悬停方向的图像预览吗？

1 个答案: