带CSS和HTML的白色幻灯片过渡

我只是想知道，当我点击网站右侧的按钮时，如何制作一个动画以滑到另一页。我希望黑色的页眉和页脚保持圆滑，但当点击右侧的按钮时，我希望空白区域滑到下一页

还有，当我将鼠标悬停在按钮上时，如果我似乎无法实现，如何使文本显示

这是我给任何想帮忙的人的代码

CSS:

HTML:

上传节日
&公牛；
&公牛；
&公牛；
&公牛；

我不知道这是否正是你想要的，因为我的英语不好。。。很抱歉这是

我给你的小提琴添加了一些JS：

jQuery( document ).ready(function( $ ) {
$('.right-nav div').click(function() {
    var id = $(this).attr('id');
    $('.slide').removeClass('active');
    if ( id == 'b1' ) {
        $('.sl1').addClass('active');
    }
    else if ( id == 'b2' ) {
        $('.sl2').addClass('active');
    }
    else if ( id == 'b3' ) {
        $('.sl3').addClass('active');
    }
});
});

还有一些CSS：

.slider {
    position: relative;
}
.slider .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transition: all 1s ease;
}

.slider .slide.sl1 {
        margin-left:100%;    
}
.slider .slide.sl2 {
        margin-left: 200%;    
}
.slider .slide.sl3 {
        margin-left: 300%;
}
.slider .slide.active {
    margin-left: 0;
}

---

您可以使用单选按钮和同级CSS选择器来实现这一点。基本思想是将按钮和幻灯片放在同一个容器中，使它们成为兄弟

单选按钮可能每个看起来像：

<label class="radiolabel b1" for="b1">&bull;</label>
<input type="radio" id="b1" name="nav-buttons" class="button-radio" />

现在，您可以将它们绑定到按钮上，如：

#b1:checked ~ .slide1 {
    left: 0;
}

因此，在这种情况下，当选择第一个单选按钮时，第一张幻灯片将移动到屏幕上

您需要根据自己的需要调整一些其他HTML和CSS

---

我在

中做了一个又快又脏的例子，你能把这些都放到js fiddle中吗。这可以通过锚链触发器完成。。我可以告诉你如果你能把代码放在fiddleSure的东西上-谢谢你的帮助@nolawipetros请把相关的代码放在fiddle上。你的导航区在哪里？你的目标是什么？它是另一个HTMLDOM元素还是一个完全不同的页面？我看到您在“div”中添加了一个hover伪类，但是接下来呢？简言之，你到底试过什么我的目标是保持同一个页面，我不想要一个完全不同的页面，我只想要一个白色的部分，它的内容就像文本一样，当我点击一个按钮时，图片等会过渡到另一个有内容的部分，但只会在空白处更改，而不会在其他地方。这是我想要的，但我的意思是我想让整个空白处移动到我想放置的新内容抱歉，但我不明白你想要什么（我的英语太差了：（）不用担心！谢谢你的尝试！

<label class="radiolabel b1" for="b1">&bull;</label>
<input type="radio" id="b1" name="nav-buttons" class="button-radio" />

<div class="slide slide1">...content... </div>

.slide {
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    -webkit-transition: left 1s;
    -moz-transition: left 1s;
    -ms-transition: left 1s;
    transition: left 1s;
}

#b1:checked ~ .slide1 {
    left: 0;
}