Question

我有220像素×220像素的正方形图像（ 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>

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

Answer 1

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

您可能还需要将display的{{1}}更改为.category-image，以缩小以适应图片的尺寸。

Example Here

Answer 2

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

我希望这会有所帮助欢呼声

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

2 个答案: