Html 如何在CSS中鼠标悬停时触发div中的一个元素

我有一个220px乘以220px的正方形图像（myimage.jpg）。在图像的右角，我有一个使用CSS（triangle topright）创建的灰色三角形，最上面是一个小png图标（my_icon.png）。我希望在用户将鼠标指针放在220px×220px图像的任何部分上时，使用CSS触发从三角形的灰色（#c3c2c0）到蓝色（#014792）的0.5秒转换。有没有什么方法可以严格使用CSS来实现这一点

这是我的密码：

<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>

---

假设

.category image

与图像大小相同，则可以使用：

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

然后对于转换，只需将属性添加到

i

元素中：（为简洁起见，省略了供应商前缀）

您可能还需要将

.category image

的

显示

更改为

内联块

，以便缩小以适应图像的尺寸

---

我不确定这是否是你想要的。但是，请为您的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;
   }

我希望这会有所帮助

---

干杯

非常感谢，我现在唯一的问题是，在加载页面时，我的三角形似乎放在了正确的位置，但我一悬停，它就会向下滑动约10px-20px并停留在那里。@LaGuille这很奇怪。你介意举个例子来说明这一点吗？在我发布的文章中没有这样做。删除

top:14

解决了这个问题。现在一切都很完美。谢谢

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

    .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;
   }