0

我正在尝试将图像容器放在另一个容器中，最终它会排成一排，现在我有四个。

我的问题是我最终想像传送带一样在屏幕上移动它们，而它们仍然在鼠标悬停时改变。

因此，重要的是，由于屏幕结束而被隐藏的那些将被切掉并且不要离开该行。我不明白为什么即使使用 nowrap 他们总是移动到另一行。

如果有人有一个简单的技巧来制作传送带，我也会很感激。我的 javascript 也不起作用。

<style>
#container {
background: transparent;
position: relative;
overflow:hidden;
white-space: nowrap;
width: 100%;
margin: 0px auto;
height: 450px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

#foto1 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content: url("images/ruecken.jpg");
}
#foto1:hover { content: url("images/image-2.jpg");
}
#foto1:active { content: url("images/image-3.jpg");
}

#foto2 {
height: 450px;

 display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto2:hover { content: url("images/image-3.jpg");
}
#foto2:active { content: url("images/image-4.jpg");
}

#foto3 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/Ruecken.jpg");
}
#foto3:hover { content: url("images/image-5.jpg");
}
#foto3:active { content: url("images/image-6.jpg");
}

#foto4 {
height: 450px;

display: inline;
vertical-align: top;
float: none;
white-space: nowrap;
content:url("images/ruecken.jpg");
}
#foto4:hover { content: url("images/image-4.jpg");
}
#foto4:active { content: url("images/image-5.jpg");
}

</style>
4

0 回答 0