Question

当用户使用鼠标指针悬停<img>元素时，如何删除{{1}}元素的透明度/不透明度？

Answer 1

默认情况下，不透明度值为1，因此您必须将其更改为小于1，然后再次使用悬停选择器1。

您需要注意的是，所有子元素都将受父div不透明度的影响。

要制作冷却器，您可以使用transition: all 0.5s ease;例如

详细了解here ( Css transition)
  有关css opacity here
的更多信息

＆＃13;

div {
height: 40px;
width: 100px;
background: #007cb0;
padding: 10px 20px;
color: white;
line-height: 40px;
text-align: center;

opacity: .4;
}

div:hover {
opacity: 1;
}

＆＃13;

<div>Hover</div>

＆＃13;

Answer 2

在悬停（opacity: 1;）元素上设置:hover

opacity: 1是默认定义，表示没有任何opacity

了解:hover：https://www.w3schools.com/cssref/sel_hover.asp

＆＃13;

img {
    opacity: 0.5;
}
img:hover {
    opacity: 1;/* To remove opacity */
}

＆＃13;

<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Forest" width="170" height="100">

＆＃13;

CSS-不透明度/图像的透明度

2 个答案: