如何使用div+css按钮下面的的内容随鼠标而变
发布网友
发布时间:2022-04-28 18:18
我来回答
共4个回答
热心网友
时间:2022-05-12 21:45
这个选项卡效果,或者叫滑动门效果!你上懒人图库,那里多得是了!给你一个我最近刚写的
<div class="fen_li">
<ul id="fenli">
<li onclick="changpro(0)" class="lion">300W-1500W</li>
<li onclick="changpro(1)" class="liout">2000W-3000W</li>
<li onclick="changpro(2)" class="liout">3000W-4000W</li>
<li onclick="changpro(3)" class="liout">10kw-60kw</li>
</ul>
</div>
<div class="pro_confen" id="procon">
<div class="profen1" style="display:block;"></div>
<div class="profen1" style="display:none"></div>
<div class="profen1" style="display:none"></div>
<div class="profen1" style="display:none"></div>
</div>
<script type="text/javascript">
function changpro(o){
var proul = document.getElementById("fenli");
var proli = proul.getElementsByTagName("li");
var divnum = document.getElementById("procon");
var pnum = divnum.getElementsByTagName("div");
for(i=0; i<proli.length; i++){
if(i == o){
pnum[i].style.display = "block";
proli[i].className = "lion";
}
else{
pnum[i].style.display = "none";
proli[i].className = "liout";
}
}
}
</script>
那个onclick可以换成onmouseover就是鼠标移上去下面的div切换的效果了!
热心网友
时间:2022-05-12 23:03
常用的是JS脚本实现,不是纯CSS的.
热心网友
时间:2022-05-13 00:38
上懒人图库...我可没打广告哦