Question

我试图实现这一点：image | demo

只有纯粹的CSS。我该怎么做到这一点？

这是演示页面的div标签：

<div class="jimgMenu">
  <ul>
    <li id="landscapes"><a href="#">Landscapes</a></li>
    <li id="people"><a href="#">People</a></li>
    <li id="nature"><a href="#">Nature</a></li>
    <li id="abstract"><a href="#">Abstract</a></li>
    <li id="urban"><a href="#">Urban</a></li>
  </ul>
</div>

编辑：这是css（stackoverflow说你的问题似乎是大多数代码添加更多细节）：

.jimgMenu {
    position: relative;
    width: 670px;
    height: 200px;
    overflow: hidden;
    margin: 25px 0px 0px;
}
.jimgMenu ul {
    list-style: none;
    margin: 0px;
    display: block;
    height: 200px;
    width: 1340px;
}
.jimgMenu ul li {
    float: left;
}
.jimgMenu ul li a {
    text-indent: -1000px;
    background: #FFFFFF none repeat scroll 0%;
    border-right: 2px solid #fff;
    cursor: pointer;
    display: block;
    overflow: hidden;
    width: 78px;
    height: 200px;
}
.jimgMenu ul li.landscapes a {
    background: url(images/landscapes.jpg) repeat scroll 0%;
}
.jimgMenu ul li.people a {
    background: url(images/people.jpg) repeat scroll 0%;
}
.jimgMenu ul li.nature a {
    background: url(images/nature.jpg) repeat scroll 0%;
}
.jimgMenu ul li.abstract a {
    background: url(images/abstract.jpg) repeat scroll 0%;
}
.jimgMenu ul li.urban a {
    background: url(images/urban.jpg) repeat scroll 0%;
    min-width: 310px;
}

Answer 1

首先将li id更改为类，然后在图像中添加a：focus类并添加宽度。见fiddle 例如

.jimgMenu ul li.landscapes a:focus {
background: url("http://www.yourdomain.com/images/landscape.jpg") repeat scroll 0%;
width:500px;
}

纯CSS的流畅图像菜单

1 个答案: