Question

我试图为我的网站设置一个悬停标题，但要让它做我想做的事情有很多麻烦。我有个别小的div来显示工作人员，当我盘旋时，我想要它给出一个幻灯片效果，最好是左边。

好的，我在这里创建了一个小提琴http://jsfiddle.net/2badzt19/

HTML：

<div class="staffinfo">
<a class="first-link" href="">
<img src=http://i57.tinypic.com/23tsj0i.jpg>
</a>
<a href="">
Admin Info
</a>
</div>

CSS：

.staffinfo a{
color: white;
text-decoration:none;
text-align: center;
display:block;/* important */
}

.staffinfo, .first-link{
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;     
}


.staffinfo{
height: 100px;
font: normal normal 700 1em/4em Arial,sans-serif;
overflow: hidden;
width: 120px;
background-color: #3b5998;
}

.staffinfo:hover{
background-color: #003D99;
}

.staffinfo a:hover{
text-decoration: none;
}

.first-link{
margin-top: 0em;   
}


.staffinfo:hover .first-link{
margin-top: -7em;
}

如何让它向左滑动？如何将其显示为包含6个相同大小，2列，3行图像的表格？

Answer 1

继承人我是怎么做的，没有桌子而是列表：

HTML

<ul class="slider">
    <li><a href="">Admin Info</a></li>
    <li><a href="">User Info</a></li>
    <li><a href="">Something</a></li>
    <li><a href="">Something Else</a></li>
    <li><a href="">What?</a></li>
    <li><a href="">More</a></li>
</ul>

CSS

ul.slider
{
    width:280px;
    list-style:none;
    padding:0;
}

ul.slider>li {

    height: 100px;
    font: normal normal 700 1em/4em Arial, sans-serif;
    overflow: hidden;
    width: 120px;
    background-color: #3b5998;
    background-image:url("http://i57.tinypic.com/23tsj0i.jpg");
    position:relative;
    display:inline-block;
}

ul.slider>li>a {
    display:block;
    margin-left:120px;
    width: 120px;
    height:100px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    color:#FFF;
    text-align:center;
    line-height:100px;
}

ul.slider>li:hover>a {
    margin-left:0px;
    background-color: #003D99;
}

基本上，a通过与li相同的边距向右偏移。在li

悬停时，此边距将被移除

Example

Now with sexy transparent background

Or if you want inline images

需要悬停才能向左滑动

1 个答案: