电话
13363039260
网站上鼠标经过出现图片CSS样式实不采用JS如何建设呢？
2020-08-17 23:46 admin
网站上鼠标经过出现图片CSS样式实不采用JS如何建设呢？网站里本身效果很多用了大量的ＪＳ来实现效果，怎么能不用ＪＳ就可以实现网站上鼠标经过出现图片CSS样式实现建设网站的效果呢。现在煜阳网络小段就来给遇到同样问题的朋友展示下，希望能给您带来光明。
鼠标经过出现图片CSS样式实现——没有JS
网站上鼠标经过出现图片CSS样式实不采用JS如何建设的代码实现，仅供参考，请根据您的具体情况调整。
<ul data-v-6d1dc19c="" class="float-nav" id="cebianlan">
<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&uin=3049128422&site=qq&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>