如何在鼠標懸停在CSS中觸發div內的一個元素

我有一個220px乘220px的方形圖像（myimage.jpg）。在圖像的右下角，我有一個使用CSS創建的灰色三角形（三角形頂點），最重要的是一個小的PNG圖標（my_icon.png）。我期望從用戶將鼠標指針放在220px×220px圖像的任意部分時使用CSS觸發，從灰色（＃c3c2c0）到藍色（＃014792）的三角形（僅限三角形）過渡0.5秒。有沒有什麼方法可以完全使用CSS？如何在鼠標懸停在CSS中觸發div內的一個元素

這裏是我的代碼：

<div class="category-image"> 
    <i class="triangle-topright"><i></i></i> 
    <img src="my_icon.png" class="icon-png-over"/> 
    <img src="my_image.jpg"/> 
</div>

CSS

.category-image { 
    position: relative; 
} 

.icon-png-over { 
    position: absolute; 
    top: 10; 
    left: 190; 
} 

.triangle-topright { 
    position: relative; 
} 

.triangle-topright > i { 
    position: absolute; 
    width: 0; 
    height: 0; 
    line-height: 0; 
    border: 32px solid transparent; 
    border-right: 32px solid #c3c2c0; 
    border-top: 32px solid #c3c2c0; 
    left: 156; 
    top: 14; 
}

來源

2014-09-04 LaGuille

假設.category-image的尺寸與圖像一樣，你可以使用：

.category-image:hover .triangle-topright > i { 
    border-right: 32px solid #014792; 
    border-top: 32px solid #014792; 
}

然後過渡，只是將屬性添加到i元素：（供應商前綴爲簡潔起見省略。）

.triangle-topright > i { 
    transition: border 0.5s linear; 
}

您可能還需要的.category-image的display改變inline-block爲了縮小以適合圖像的尺寸。

Example Here

來源

2014-09-04 22:23:43

非常感謝，我現在唯一的問題是我的三角形似乎在加載時被放置在適當的位置頁面，但只要我徘徊，它向下滑動約10px-20px並停留在那裏。 – LaGuille 2014-09-04 22:30:31

@LaGuille這很奇怪。你介意舉個例子來證明這一點嗎？這不是我發佈的那個。 – 2014-09-04 22:32:20

刪除'top：14'解決了這個問題。現在一切都很完美。謝謝！ – LaGuille 2014-09-04 22:36:45

我不知道這是否是你想要的。然而，試試這個代碼，你的CSS

.category-image { 
     position:relative; 
    } 
    .icon-png-over { 
     position:absolute; 
     top:10; 
     left:190; 
    } 
    .triangle-topright { 
     position: relative; 
    } 
    .triangle-topright > i { 
     position: absolute; 
     width: 0; 
     height: 0; 
     line-height: 0; 
     border: 32px solid transparent; 
     border-right: 32px solid #c3c2c0; 
     border-top: 32px solid #c3c2c0; 
     left: 156; 
     top: 14; 
     -webkit-transition: border 0.5s ease; 
     -moz-transition: border 0.5s ease; 
     -o-transition: border 0.5s ease; 
     transition: border 0.5s ease; 
    } 
    .triangle-topright > i:hover { 
     border-right: 32px solid #014792; 
     border-top: 32px solid #014792; 
    }

我希望這將有助於歡呼

來源

2014-09-04 22:59:47 user3855207

如何在鼠標懸停在CSS中觸發div內的一個元素

回答

相關問題