動畫懸停效果不起作用ul> li

所以我試圖重新創建這個真正的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; 
    } 
}

來源

2013-02-27 Leon Gaban

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

看起來你在你的例子中有一個小的錯字。 .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

來源

2013-02-28 01:06:09 smurfarita

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

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

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

.thumb > img { ... }

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

來源

2013-02-27 21:15:25 Madbreaks

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

動畫懸停效果不起作用ul> li

回答

相關問題