0

(たとえば) 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');
});
4

1 に答える 1

0

使用してください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.
});
于 2014-10-17T18:07:23.890 に答える