Home > Developer > Web Develop
The effect of the event is like the set of Baidu home page options, when the mouse moved in, the effect of moving out, nonsense not much to say, directly on the code.
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Baidu </title>
<style type= "Text/css" > A bit of CSS
#wrap {
width:150px;height:200px;
/*background:rgb (211,211,211); * *
margin:200px Auto 0px;
Text-align:center;
position:relative;
Background:rgb (225,225,225);
}
a{
Color:white;
Display:inline-block;
width:150px;height:20px;
}
. one{
Position:absolute;
left:70px;top:14px;
Color:white;
}
#div1 {
width:80px;height:81px;
margin:3px Auto 0px;
Background:white;
}
#div1 a{
Display:inline-block;
width:78px;
height:25px;
Color:black;
font-size:15px;
line-height:25px;
Text-decoration:none;
position:relative;
margin:1px 1px;
Z-index:1;
}
</style>
<body>
<div id= "wrap" > HTML content
<a href= "#" id= "set" > Settings </a>
<span class= "One" >♦</span>
<div id= "Div1" >
<a href= "#" class= "I" > Search Settings </a>
<a href= "#" class= "twin" > Advanced search </a>
<a href= "#" class= "the Other" > Search history </a>
</div>
</div>
<script type= "Text/javascript" > It's JS, please.
var set = document.getElementById (' Set ');
var div1 = document.getElementById (' Div1 ');
var one = Document.getelementsbyclassname (' one ');
var = document.getelementsbyclassname (' both ');
One[0].style.display = ' None ';
Div1.style.display = ' None ';
Set.onmouseover = function () {
One[0].style.display = ' block ';
Div1.style.display = ' block ';
}
Set.onmouseout = function () {
One[0].style.display = ' None ';
Div1.style.display = ' None ';
}
Two[0].onmouseover = function () {
Two[0].style.background = ' rgb (57,139,251) ';
}
Two[1].onmouseover = function () {
Two[1].style.background = ' rgb (57,139,251) ';
}
Two[2].onmouseover = function () {
Two[2].style.background = ' rgb (57,139,251) ';
}
Two[0].onmouseout = function () {
Two[0].style.background = ' white ';
}
Two[1].onmouseout = function () {
Two[1].style.background = ' white ';
}
Two[2].onmouseout = function () {
Two[2].style.background = ' white ';
}
Div1.onmouseover = function () {
One[0].style.display = ' block ';
Div1.style.display = ' block ';
}
Div1.onmouseout = function () {
One[0].style.display = ' None ';
Div1.style.display = ' None ';
}
One[0].onmouseover = function () {
One[0].style.display = ' block ';
Div1.style.display = ' block ';
}
One[0].onmouseout = function () {
One[0].style.display = ' None ';
Div1.style.display = ' None ';
}
</script>
</body>
The effect of entering the page is this:
When you move the mouse over the settings, the effect is this:
The background color turns blue when the mouse moves to the following options:
The page is as shown in the first picture when you move the mouse over settings or the following 3 options.
JS Mouse move in, move out event
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
