时间戳

首页 > 解决方案 > 将鼠标悬停在不透明度上

html - 将鼠标悬停在不透明度上

问题描述

只是想知道，当我们将鼠标悬停在特定的 div 类上时，是否可以更改特定 div 类和其他 div 类的不透明度？如果是这样，我该怎么做？任何意见将不胜感激。谢谢你。

标签： htmlcss

解决方案

我想这就是你所追求的！

    div {
      height: 50px;  
    }
    
    .divOne {
      background-color: purple;
    }
    
    .divOne:hover{
      opacity: 0.7;
    }
    
    .divTwo {
      background-color: green;
    }
    
    .divTwo:hover{
      opacity: 0.5;
    }
    <div class="divOne">
    
    </div>
    <div class="divTwo">
    
    </div>
    <div class="divOne">
    
    </div>

请参阅工作 JSFiddle：https ://jsfiddle.net/19r6nvz7/1/

以下是一些用于进一步研究的资源

：:hover - https://www.w3schools.com/cssref/sel_hover.asp
不透明度- https://www.w3schools.com/css/css_image_transparency.asp

推荐阅读