如何在鼠标悬停在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内的一个元素

回答

相关问题