Question

嘿伙计们，我怎样才能实现像下面网站上使用的悬停效果？

http：// minimalmonkey .com /

我目前的HTML： http://pastebin.com/jCiy0ghX

我的CSS： http://pastebin.com/WeQBDx8b

尝试了许多不同的方法，例如悬停和边界上的边框。悬停时宽度变化但没有任何运气..

先谢谢，卢克。

Answer 1

我试图让它变得相似，根据细节，有几件事需要考虑：

当它增长时，内容不会从位置移动 - 这就是原因填充受影响
专栏往往围绕其中心生长 - 边缘和边界同时改变以实现这一目标。
外部列似乎淡入背景 - 不透明度因为它们而改变。

除了创建一个容器来包装列之外，一切都是纯CSS

修改后的CSS：

/* Column Styling CSS */

#left-column{
  background-color: #27ae60;
  left:0;
    border-color:#27ae60;    
}

#centre-column{
  background-color: #e67e22;
  left: 33.33%;
    border-color:#e67e22;
}

#right-column{
  background-color: #c0392b;
  left: 66.66%;
    border-color:#c0392b;
}

div[id$="column"]{
  width: 33.33%;
  height: 100%;
    position: absolute;     
}

.columns{
    background-color: #333;
    width: 100%;
    height: 100%;
    position: absolute;
}

.columns:hover div{
    /*
        transition for animation in modern browsers
    */    
    transition: opacity linear .2s;    
    opacity:0.3;
}

div[id$="column"]:hover{
    /*
        transition for animation in modern browsers
    */    
    transition: border ease-out .1s,margin ease-out .1s,padding ease-out .1s;
    z-index:200;
    margin-left:-20px;
    padding-left:20px;
    border-right:solid 20px;
    opacity:1;
}

我使用过渡属性w / out前缀。你应该选择适合你的那个。点击此处查看演示：http://jsfiddle.net/pixshatterer/Zf6VU/

Answer 2

以下是使用CSS执行此操作的方法：http://jsfiddle.net/4v3GE/5/

注意：我添加了一个柱容器。

.column {
    width: 33.33%;
    height: 200px;
    float: left;
    -webkit-transition: width .2s ease-in-out;
       -moz-transition: width .2s ease-in-out;
         -o-transition: width .2s ease-in-out;
            transition: width .2s ease-in-out;
}

.column--left{
    background-color: #27ae60;
}

.column--center {
    background-color: #e67e22;
}

.column--right {
    background-color: #c0392b;
}


/* Hover styling */

.columns:hover .column {
    width: 25%;
}

.columns .column:hover {
    width: 50%;
}

我怎样才能实现这种悬停效果？尝试了几种没有运气的方法

2 个答案: