I have a web page with 3 links. 1 of the links is hidden by a parent div that has display:none. When I hover over another div however, the hidden div will be shown thereby revealing the link. How can I tab through all 3 links and get link 3 to display automatically when i tab to it?
<html>
<head>
<title>Skype Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style>
a,.hoverMe{
display:block;
width:50px;
height:50px;
margin-bottom:10px;
background-color:#CCC;
}
.hoverMe{
background-color:pink;
width:100px;
height:50px;
}
.hiddenDiv{
visibility:hidden;
}
.hiddenDiv.shown{
visibility:visible;
}
</style>
<script>
$(document).ready(
function(){
$(".hoverMe").hover(
function(){
$(".hiddenDiv").addClass("shown");
},
function(){
$(".hiddenDiv").removeClass("shown");
}
)
}
);
</script>
</head>
<body>
<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<div class="hoverMe">hover me to open Link 3</div>
<div class="hiddenDiv">
<a href="#3">Link 3</a>
</div>
</body>
</html>