javascript - 如何通过将鼠标悬停在另一个元素上来更改一个元素？

Question

我正在尝试做许多人之前问过的事情，但即使在尝试了一切之后我仍然无法得到我想要的结果。

我有一个 600px x 1600px 的图像，垂直线上有 4 个 600px x 400px 的图像。我想在任何时候显示 600px x 400px 的图像。理想情况下，我能够将鼠标悬停在页面上某处的元素上，然后向上移动图像以显示 600 像素 x 400 像素图像的其他部分。实际上，通过将鼠标悬停在 4 个元素上，我可以查看 4 个图像。

我尝试过各种 css3 和 jquery 解决方案，但没有一个有效。我将不胜感激任何帮助。

HTML

<div class="mainimage">
    <div class="buttonsection">
        <div class="button1">Button 1</div>
        <div class="button2">Button 2</div>
        <div class="button3">Button 3</div>
        <div class="button4">Button 4</div>
    </div><!--end of buttonsection-->

    <div class="rollingimage">
        <img src="IMG/four-pics.png">
    </div><!--end of rollingimage--> 

</div><!--end of mainimage-->
</div><!--end of main content-->

CSS

.mainimage {
    position: relative;
    top: 0px;
    left: 0px;
    width: 900px;
    height: 400px;
    border: 2px solid #E78F25;
    margin: 0 10px 20px 0;
}

.buttonsection {
    width: 290px;
    height: 400px;
    position: relative;
    float: left;
}

.button1,
.button2,
.button3,
.button4 {
    display: inline;
    height: 98px;
    width: 290px;
    border: 1px solid #E78F24;
    text-align: center;
    float: left;
}


.rollingimage {
    width: 598px;
    height: 400px;
    position: relative;
    overflow: hidden;
    top: 0px;
    left: 0px;
    float: right;
}

jquery

$(document).ready(function(){
    $(".button1").hover(function(){
        $('.rollingimage').stop().animate({'top': '-200px'}, 1500);
    });
});

这是 jsfidle:http://jsfiddle.net/dirtyd77/jCvYm/1/

再次感谢

加里

Answer 1

只是为了好玩，没有 JS:

http://jsfiddle.net/coma/MTWdb/5/

HTML

<div id="foo">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <div></div>
</div>

CSS

#foo {
    width: 400px;
    border: 2px solid #E78F25;
    position: relative;
}

#foo > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 200px;
    background: #fff url(http://placekitten.com/600/1600) no-repeat 0 0;
    transition: background-position .5s;
}

#foo > a {
    display: block;
    width: 200px;
    line-height: 100px;
    text-align: center;
    text-decoration: none;
}

#foo > a + a {
    border-top: 1px solid #E78F25;
}

#foo > a:nth-child(1):hover ~ div {
    background-position: 0 0;
}

#foo > a:nth-child(2):hover ~ div {
    background-position: 0 -400px;
}

#foo > a:nth-child(3):hover ~ div {
    background-position: 0 -800px;
}

#foo > a:nth-child(4):hover ~ div {
    background-position: 0 -1200px;
}