Question

我偶然发现了一张推荐网格滑块的图片，我真的很喜欢website上的类似内容。

我一直在寻找一个用html和css模拟这个的好方法。我试图避免使用javascript，因为在我的wordpress网站上实现它是太复杂了，它通常每次我尝试时都会破坏我的网站。我找到了这个标签式图库：

会有一种简单的方法让它看起来更像上面的例子吗？我似乎无法真正让它四处走动，看起来像我想要的那样。

Answer 1

我相信这可以建立如下：

虽然，如果你使用像bootstrap这样的网格系统，那会更容易。

<row>
    <col>The left image</col>
    <col>
        <row>
            <row>First row with peoples images</row>
            <row>Second row with people's images</row>
        </row>
        <row>Description of the person</row>
    </col>
</row>

此外，你需要一些javascript，如果你使用jquery，它会变得更容易：

$(element).hover(function(){
   $(description).html(description);
});

这不是实际的代码，只是一个解决方案。

Answer 2

我为你制作了一个布局来演示如何做到这一点^^

.wrapper {
	width: 500px;
	height: 200px;
	position: relative;
}
input {
	display: none;
}
.images {
	width: 300px;
	height: 160px;
	position: absolute;
	top: 0;
	right: 0;
}
label {
	display:block;
	width: 50%;
	height: 100%;
	background: lightblue;
	float: left;
}
label:hover {
	background: darkblue;
}
.left1, .left2 {
	width: 200px;
	background: blue;
	display: none;
	position: absolute;
	top: 0;
	left: -200px;
	bottom: -40px;
}
.bottom1, .bottom2 {
	width: 300px;
	height: 40px;
	position: absolute;
	bottom: -40px;
	right: 0;
	display: none;
	background: orange;
}
#img1:checked + .img1,
#img2:checked + .img2 {
	background: darkblue;
}
#img1:checked + .img1 + .left1,
#img2:checked + .img2 + .left2,
#img1:checked + .img1 + .left1 + .bottom1,
#img2:checked + .img2 + .left2 + .bottom2{
	display: block;
}

<div class="wrapper">  
	<div class="images">
		<input id="img1" type="radio" checked name="img" />
		<label class="img1" for="img1"></label>
		<div class="left1">lalalallalala  la l ala la la </div>
		<div class="bottom1">a lal  all ala</div>
		
		<input id="img2" type="radio" name="img" />
		<label class="img2" for="img2"></label>
		<div class="left2">gb bgbg  gb g b gb gb  </div>
		<div class="bottom2">gb gb g b gb g b gb</div>
	</div>
</div>

有没有办法用CSS重新创建这个网格滑块？

2 个答案: