css - 如何修复 HTML 样式覆盖 CSS？

Question

我想在悬停时显示完整的图像不透明度。目前设置为0.6作为代码嵌入到HTML中？

我试过向 CSS 添加一个 !important 状态，它给了我完全的不透明度，但失去了滚动功能。

这是给我带来问题的 HTML:

<div class="portfolio-image" style="display: block; opacity: 0.6; transform: translate3d(0px, 0px, 0px) scale(1.02868, 1.02868);">

这是我试过的:

.portfolio-image{
   opacity:1 !important;
}

我希望不透明度为 1，而不是 0.6

Answer 1

试试这个，

.portfolio-image {opacity:0.6; transform: translate3d(0px, 0px, 0px) scale(1.02868, 1.02868); display:inline-block;}

.portfolio-image:hover {opacity:1;}

<div class="portfolio-image">
  
  <img src="https://dummyimage.com/600x400/000/fff">
</div>

如果您想在 html 中内联应用 css，您只需将 hover css 更新为。我们需要 !important

.portfolio-image:hover {opacity:1 !important;}

.portfolio-image:hover {opacity:1 !important;}

<div class="portfolio-image" style="opacity: 0.6; transform: translate3d(0px, 0px, 0px) scale(1.02868, 1.02868); display:inline-block;"> <img src="https://dummyimage.com/600x400/000/fff"></div>