<script>
$('#ID элемента по которому hover').hover(function(){
$('#ID этого дива').css('display','block');
});
</script>

<div id="element">Показать</div>
<div id="hiddenDiv" style="display:none;">Скрытый</div>
<script>
$('#element').hover(function(){
$('#hiddenDiv').css('display','block');
});
</script>

div1 {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
}

div1:hover {
opacity: 1;
filter: alpha(opacity=100.0);
-moz-opacity: 1;
}

div1 {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-khtml-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}

<a onclick="showhide('div1');">Кнопка Открыть \ Скрыть блок</a>

<style type="text/css">
    .hide { visibility:hidden }
    .show { visibility:visible }
</style>
<script>
    function showhide(div1)
{
if (document.getElementById(div1).style.width == "1px")

{
document.getElementById(div1).style.width = "100px";
document.getElementById(div1).style.visibility = "visible";
}
else
{
    document.getElementById(div1).style.width = "1px";
    document.getElementById(div1).style.visibility = "hidden";
    }
}
</script>