2013-02-27 218 views
0

所以我試圖重新創建這個真正的cool hover effect seen here,當你翻轉左側的大銷售圖像時。動畫懸停效果不起作用ul> li

克里斯Coyier然後創建一個super detailed tutorial here. 基本上就側翻,這個涼爽的對角線剝離後臺啓動動畫的DIV /盒/圖像後面。

除了當我將div的內部包裝到列表(ul li)中時,所有東西都可以工作。 ?一旦我這樣做,我的代碼停止工作:(有沒有周圍的辦法還是我做什麼新手的錯誤

這裏是我的codepen: http://codepen.io/leongaban/pen/hpzqD

HTML

<ul> 
    <li> 

    <div class="thumb"> 
     <div class="thumb-hover"></div> 
     <a href="#"> 
      <img src="http://f.cl.ly/items/3k3d1g3K34470d2v2K3O/50d942d85384a.jpeg"/> 
     </a> 
    </div> 

    </li> 
</ul> 

CSS

ul li { 
list-style: none; 
float: left; 
} 

.thumb { 
    width: 376px; 
    padding: 15px; 
    position: relative; 
    float: left; 
    margin: 0 20px 0 0; 
} 
.thumb > img { 
    display: block; 
    position: relative; 
} 
.thumb:hover .product-hover, .thumb:active .product-hover { 
    opacity: 1; 
} 

.thumb-hover { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
    background-size: 30px 30px; 
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent); 
    animation: barberpole 0.5s linear infinite; 
} 

@keyframes barberpole { 
    from { 
    background-position: 0 0; 
    } 

    to { 
    background-position: 60px 30px; 
    } 
} 
+0

編輯我開始讓我的codepen叉與UL>李HTTP工作:/ /codepen.io/leongaban/pen/nbCpw現在必須弄清楚我的主要項目中發生了什麼 – 2013-02-27 21:27:59

回答

1

看起來你在你的例子中有一個小的錯字。 .product-hover應該變成.thumb-hover

另外,你會希望你的css是.thumb> a {display:block;位置:相對; }如果沒有,酒吧動畫將在您的圖像上。

在你codepen改變SCSS爲以下內容:

> a { 
display: block; 
position: relative; 
} 
&:hover, &:active { 
.thumb-hover { 
    opacity: 1; 
} 

}

http://codepen.io/anon/pen/ACewa

+0

謝謝!這有效:) – 2013-02-28 02:25:07

+0

嗨Smurfarita,我實施了確切的代碼:http://codepen.io/leongaban/pen/nbCpw我的網站在這裏:http://leongaban.com/然而,由於某種原因沒有看到懸停效果,可能會發佈一個新的堆棧問題。 – 2013-02-28 02:59:00

0

假設您試圖影響您的<img>代碼片段,這是行不通的:

.thumb > img { ... } 

那(特別是>)表示「應用以下規則來<img>元素與.thumb類中的任何元素的直接後裔(孩子)。」但是根據你的標記,事實並非如此。嘗試刪除該CSS規則定義中的>

+0

實際上效果是在.thumb-hover div而不是圖像上,Chris也有相同的東西.product http:// codepen .io/chriscoyier/pen/AzdcK – 2013-02-27 21:21:03