导航

专业做网站建设公司、网页设计制作、百度优化推广、网站维护托管等网站相关业务,欢迎咨询。

域名空间 | 服务领域  网站建设1500元全包。做完验收修改到满意为止可淘宝付款有保证!
当前位置: 邯郸网站建设 > 网页设计制作百科 > 常见问题

网站上鼠标经过出现图片CSS样式实不采用JS如何建设呢?


来源:邯郸煜阳网络公司  时间:2020-08-17 23:46    
  网站上鼠标经过出现图片CSS样式实不采用JS如何建设呢?网站里本身效果很多用了大量的JS来实现效果,怎么能不用JS就可以实现网站上鼠标经过出现图片CSS样式实现建设网站的效果呢。现在煜阳网络小段就来给遇到同样问题的朋友展示下,希望能给您带来光明。
 
鼠标经过出现图片CSS样式实现——没有JS
网站上鼠标经过出现图片CSS样式实不采用JS如何建设

网站上鼠标经过出现图片CSS样式实不采用JS如何建设的代码实现,仅供参考,请根据您的具体情况调整。
<ul data-v-6d1dc19c="" class="float-nav" id="cebianlan">
<li data-v-6d1dc19c="">
<div data-v-6d1dc19c="">
<h4 data-v-6d1dc19c=""><a href="http://vip.hdf588.com/account/login"  target="_blank" >立即登录</a></h4>
<div data-v-6d1dc19c="" class="icon-bg">
<i data-v-6d1dc19c="" class="icon iconfont icon-yonghu4">
</i>
</div>
</div>
</li>
<!---->
<li data-v-6d1dc19c="">
<div data-v-6d1dc19c="">
<h4 data-v-6d1dc19c=""><a href=" http://vip.hdf588.com/Account/Register?role=2 "  target="_blank" >快速注册</a></h4>
<div data-v-6d1dc19c="" class="icon-bg">
<i data-v-6d1dc19c="" class="icon iconfont icon-zhuce2">
</i>
</div>
</div>
</li>
<li data-v-6d1dc19c="">
<a data-v-6d1dc19c="" href="http://wpa.qq.com/msgrd?v=3&amp;uin=3049128422&amp;site=qq&amp;menu=yes" target="_blank">
<div data-v-6d1dc19c="">
<h4 data-v-6d1dc19c="">咨询客服</h4>
<div data-v-6d1dc19c="" class="icon-bg">
<i data-v-6d1dc19c="" class="icon iconfont icon-zixun1">
</i>
</div>
</div>
</a>
</li>
<div >
<li data-v-6d1dc19c="" >
 
 
<div data-v-6d1dc19c="">
<h4 data-v-6d1dc19c="">运营客服</h4>
<div data-v-6d1dc19c="" class="icon-bg">
<i data-v-6d1dc19c="" class="icon iconfont icon-zixun1">
</i>
</div>
</div>
<div id="vx"><img src="images/821bd77e-397c-4681-9198-af7d4858b5b2.jpeg" width="180px" height="180px"></div>
</li>
 
</div>
<style type="text/css">
.float-nav li[data-v-6d1dc19c]{
    overflow: visible; 
}
   #cebianlan li:nth-child(1) > #vx{
        background-color: #f2f2f2;
        position: absolute;
        right: 190px;
        top: -110px;
        width: 160px;
        height: 160px;
        padding: 20px;
        box-sizing: border-box;
        display: none;
    }
    #cebianlan li:nth-child(1) > div img{
       width: 100%;
       height: 100%;
    }
 
    #cebianlan li:nth-child(1):hover #vx {
        display: block;
    }
 
</style>
 
</ul>

专业网站建设20
网站制作热线:133-6303-9260
总部地址:邯郸市义乌小商品批发城15楼09号
网站建设专线:0310-3208323
微信营销专线:1336-3039260
官方网站:www.alisoho.net

邯郸网站建设客服QQ
邯郸煜阳科技微信公众号
微信公众号扫一扫微信号:13363039260
提供您的网站制作需求
欢迎与我们洽谈网站建设业务,您也可以在下面提交您的网站制作需求
我们将竭诚为您服务!
如何称呼:
联系方式:
联系地址:
建站需求: