鼠标移上去时，选择时显示罩层和文字说明

最新推荐文章于 2024-08-01 15:05:06 发布

XUYANBOYA

最新推荐文章于 2024-08-01 15:05:06 发布

阅读量342

点赞数

文章标签： servlet java html

本文链接：https://blog.csdn.net/XUYANBOYA/article/details/128147874

版权

}
.contentimg .img_content{
position: absolute;
   top:0;
left: 0;
width: 100%;
   height: 400px;
   object-fit: cover;
   object-position: center;
}
.contentimg .img_content .mask{
position: absolute;
   top:0;
left: 0;
width: 100%;
height: 100%;
background:rgb(0 0 0 / 70%) !important;
color:#fff;
text-align: center;
display: none;
}
.contentimg .img_content .mask .stitled{margin-top: 30%; margin-bottom: 10%; font-weight: 500; font-size: 20px;
}

.contentimg .img_content .mask .shuoming{
line-height: 1.8;
width: 70%;
margin-left: 15%;
margin-right: 15%;
text-align: justify;}

.contentimg .img_content .mask .fenlei{
   margin-top:20%;
   width:40%;
   margin-left: 30%;
   margin-right: 30%;
   border: 0.5px solid #fff;
   padding: 5px;
   color: #fff;
}
</style>

//罩层效果
       $(function(){
       $(".contentimg .img_content").mouseover(function(){
       $(this).find(".mask").show();
       });
       $(".contentimg .img_content").mouseout(function(){
       $(".img_content .mask").hide();
       });
       });
       //导航栏按钮
       $('.btnImg').click(function() {
           if (toggle) {
               $('.btnImg').css("border", "1px solid #b0ccf3");
               toggle = false
           } else {
               $('.btnImg').css("border", "1px solid transparent");
               toggle = true;
           }
           $(".show").slideToggle(300);
       })