Hover与JavaScript结合案例
程序员文章站
2022-07-04 12:03:11
...
原图:
鼠标移入到红色矩形到导航栏下面的内容就会变化。 HTML源代码:
<ul class="yuy">
<li><a href="">English</a></li>
<li><a href="">Español</a></li>
<li><a href="">Français</a></li>
<li><a href="">Русский язык</a></li>
<li><a href="">日本語</a></li>
<li><a href=""> عربى</a></li>
<li><a href="">한국어</a></li>
<li><a href="">Deutsch</a></li>
<li><a href="">Português</a></li>
</ul>
CSS样式表:
.yuy{
float: left;
height: 35px;
line-height: 35px;
float: left;
}
.yuy li a{
padding: 0px 8px;
font-family: Arial, Helvetica, sans-serif;
height: 34px;
display: inline-block;
font-size: 12px;
text-align: center;
color: #373737;
line-height: 35px;
background: #fff;
}
.yuy a:hover{
color: #0280bb;
border: 1px solid #d5d5d5;
border-bottom: none;
border-top: 2px solid #f00;
position: relative;
top: -1px;
height: 35px;
}
实现效果图:
鼠标移入到li标签,就会触发hover会带有一个切换的效果。
JavaScript
var boxList = document.getElementsByClassName("box");
var yuList = document.getElementsByClassName("yu");
for (let i = 0; i < yuList.length; i++) {
yuList[i].onmouseenter = function (){
for (let j = 0; j < boxList.length; j++) {
boxList[j].style.display = "none";
boxList[i].style.display = "block";
console.log("aaa");
}
}
// console.log(yuList[i].index);
}
// console.log(yuList);
};
谢谢观看,如有不足希望指点一二!
上一篇: OpenGL基础(一):点
下一篇: OpenGL基础代码整理
推荐阅读
-
JavaScript与HTML结合的基本使用方法整理
-
结合代码图文讲解JavaScript中的作用域与作用域链
-
JavaScript与HTML结合的基本使用方法整理
-
JavaScript设计模式--简单工厂模式定义与应用案例详解
-
JavaScript parseInt()与Number()区别案例详解
-
Hover与JavaScript结合案例
-
结合代码图文讲解JavaScript中的作用域与作用域链
-
一个css与js结合的下拉菜单支持主流浏览器_javascript技巧
-
一个css与js结合的下拉菜单支持主流浏览器_javascript技巧
-
JavaScript与HTML结合的基本使用方法整理