Question

我有（例如）6个元素，所有元素都有相同的类和不同的内容。所有这些背景都有轻微的放大。当鼠标悬停在它们上面时，我需要它们的背景相应移动。我的问题 - 一旦我将鼠标悬停在单个元素上，所有背景都会移动。有什么帮助吗？这是我的代码：

HTML（单个元素）：

<a href="/" class="project" style="background-image: url('link_to_image');"><p>Project</p><span>Description</span></a>

CSS（再次，单个元素）：

.project {
    position: relative;
    display: inline-block;
    margin: 10px;
    height: 400px;
    width: 400px;
    background: #b0bec5;
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0px 0rem 0px rgba(0,0,0,0), inset 0px -50px 100px -40px rgba(0,0,0,0.6);
    transition: box-shadow .5s ease-in-out;
    overflow: hidden;
    float: left;
    white-space: initial;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.project p {
    position: absolute;
    bottom: 2%;
    left: 2%;
    font-size: 40px;
    font-family: "Josefin Slab";
    font-weight: bold;
    transition: all .46s ease-in-out;
    transition-delay: .02s;
    z-index: 1;
}

.project span {
    display: block;
    position: absolute;
    top: 100%;
    left: 2%;
    font-size: 20px;
    font-family: "Raleway";
    transition: all .46s ease-in-out;
    transition-delay: .02s;
    z-index: 1;
}

.project:hover p {
    bottom: 88%;
}

.project:hover span {
    top: 15%;
}

.project:hover {
    box-shadow: inset 0px -30rem 0px rgba(0,0,0,0.4);
}

JS：

$(".project").on("mousemove", function(e){
    x = (e.pageX - e.target.offsetLeft * 1.5) / 4;
    console.log(x);
    $(".project").css('background-position-x', x + 'px');
});

Answer 1

使用this！

$(".project").on("mousemove", function(e){
    x = (e.pageX - e.target.offsetLeft * 1.5) / 4;
    console.log(x);
    $(this).css('background-position-x', x + 'px'); //"this" refers to the .project elem that the event is occurring on.
});

鼠标移动目标上的jQuery选择所有类似的元素

1 个答案: