如何使用Javascript或CSS悬停按钮并使div向右或向左滚动？

我正在尝试创建一个照片库，其中包含一个用于下面描述的块。我还想有两个按钮，一个在照片的两边。当您将鼠标悬停在这些按钮（可能是箭头）上时，我希望包含照片的div向右或向左滚动（或显示为滚动）。我已经研究了一些JSFIDDLE，但没有一个完全符合我的要求。很接近，但我希望它能左右滚动，而不是上下滚动。我用我的div尝试了这个代码，但没有任何效果。这是我正在使用的页面：

[网站不再存在]

提前谢谢

var amount = '';

function scroll() {
    $('#container').animate({
        scrollTop: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}
$('#hover').hover(function() {
    amount = '+=10';
    scroll();
}, function() {
    amount = '';
});
$('#hover2').hover(function() {
    amount = '-=10';
    scroll();
}, function() {
    amount = '';
});

---

在滚动功能中，您要设置“向左滚动”

我创造了一把小提琴，我想它能做你想做的事。我已经将文本放入另一个div中，这样它就不会自动换行到主容器的宽度

function scroll() {
    $('#container').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}

---

在滚动功能中，您要设置“向左滚动”

我创造了一把小提琴，我想它能做你想做的事。我已经将文本放入另一个div中，这样它就不会自动换行到主容器的宽度

function scroll() {
    $('#container').animate({
        scrollLeft: amount
    }, 100, 'linear',function() {
        if (amount != '') {
            scroll();
        }
    });
}

你必须改变

 $('#container').animate({
    scrollUp: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

到

你必须改变

 $('#container').animate({
    scrollUp: amount
}, 100, 'linear',function() {
    if (amount != '') {
        scroll();
    }
});

到

---

那太好了，但是你能告诉我如何防止

像现在这样掉落吗？我想试着把按钮和照片放在同一行。由于某些原因，javascript也无法工作。我假设您正在查看原始URL。使div-photosContainer向左浮动，然后将其置于导航IMGs上方。编辑：非常感谢！我的CSS有一个输入错误。现在一切正常。这很完美，但是你能告诉我如何防止
像现在这样下降吗？我想试着把按钮和照片放在同一行。由于某些原因，javascript也无法工作。我假设您正在查看原始URL。使div-photosContainer向左浮动，然后将其置于导航IMGs上方。编辑：非常感谢！我的CSS有一个输入错误。一切都好了。