jq鼠标经过图片消失和出现边框

最新推荐文章于 2022-03-16 18:58:09 发布

weixin_34310127

最新推荐文章于 2022-03-16 18:58:09 发布

阅读量274

点赞数

文章标签：前端 javascript python ViewUI

原文链接：https://my.oschina.net/parchments/blog/656248

版权

2019独角兽企业重金招聘Python工程师标准>>>

jq鼠标经过图片消失和出现边框

css

.big_box2{margin: 0;overflow: hidden; position: relative;width: 600px;height: 300px;}
.big_box2 a{ position: relative; display: block;width: 600px;height: 300px;}
.big_box2 a .xian_di{z-index: 1;margin: 0;width: 600px;height: 300px;overflow: hidden;}
.big_box2 a .xian_di>img{width: 100%;height: 100%;}
.big_box2 a .xian_di .yin_xian{border: 2px solid blueviolet;text-align: center; 
z-index: 10; visibility: visible;filter: alpha(opacity=0);   line-height: 100%;  
-webkit-transition: all 0.5s ease;  background: rgba(0,0,0,.5); position: absolute;
top:0;left: 0;padding-top: 30px; width: 600px;height: 300px;overflow: hidden;}

.hide{display:none;}
.on{border: 2px solid blueviolet;margin: -5px; padding: 3px;}

html

<div class="big_box2">
    <a href="#">
        <div class="xian_di">
            <img src="images/111.jpg">
            <div class="yin_xian">
                <img src="images/gz_erweima.png">
            </div>
        </div>
    </a>
</div>

js

<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

<script>
    $(function () {
        $('.big_box2').hover(function () {
            $('.yin_xian').toggleClass('hide');
            $('.big_box2').toggleClass('on');
        });
    });
</script>

//本文来源于网络，本人总结起来并优化，分享给有需要的前端朋友，如有侵权，请联系删除，也请指正、批评

转载于:https://my.oschina.net/parchments/blog/656248