如何使用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

上懒人图库...我可没打广告哦