Purpose:
To manage more HTML elements while mouse over instead of self.
HTML Code:
<html>
<head>
<style>
.alist{
display: inline-block;
}
.alist li{
display: inline;
margin: 0;
padding: 0;
}
HR.hrr{
-moz-transition: all 0.2s ease-out 0s;
opacity:0;
color:red;
}
.spn{
-moz-transition: all 0.5s ease-out 0s;
font-family: verdana;
font-size: small;
opacity: 0;
padding: 5px;
color:red;
}
.alist LI:hover .spn{
-moz-transition: all 0.5s ease-in 0s;
opacity:1;
}
.alist LI:hover .hrr{
-moz-transition: all 0.2s ease-in 0s;
opacity:1;
}
</style>
</head>
<body>
<ul class="alist">
<li>
<hr class="hrr"/>
<a href="#">Link 1</a>
<span class="spn"><< click here to go</span>
</li>
<li>
<hr class="hrr"/>
<a href="#">Link 2</a>
<span class="spn"><< click here to go</span>
</li>
</ul>
</body>
</html>
Demo:
To manage more HTML elements while mouse over instead of self.
HTML Code:
<html>
<head>
<style>
.alist{
display: inline-block;
}
.alist li{
display: inline;
margin: 0;
padding: 0;
}
HR.hrr{
-moz-transition: all 0.2s ease-out 0s;
opacity:0;
color:red;
}
.spn{
-moz-transition: all 0.5s ease-out 0s;
font-family: verdana;
font-size: small;
opacity: 0;
padding: 5px;
color:red;
}
.alist LI:hover .spn{
-moz-transition: all 0.5s ease-in 0s;
opacity:1;
}
.alist LI:hover .hrr{
-moz-transition: all 0.2s ease-in 0s;
opacity:1;
}
</style>
</head>
<body>
<ul class="alist">
<li>
<hr class="hrr"/>
<a href="#">Link 1</a>
<span class="spn"><< click here to go</span>
</li>
<li>
<hr class="hrr"/>
<a href="#">Link 2</a>
<span class="spn"><< click here to go</span>
</li>
</ul>
</body>
</html>
Demo:
No comments:
Post a Comment