Realizar hover sobre un elemento y ocultar otro

[Kurassier]

Hola!

Mira, eso lo puedes hacer con CSS y JavaScript, te dejo un código de ejemplo:

HTML

Código HTML:

<script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="cod_function.js"></script>
<div id="menu">
<ul id="menuAcordeon">
    <li>
        <a href="#"> Registro </a>
        <ul>
            <li> <a href="javascript:datosPersonales()"> Datos Personales </a> </li>
            <li> <a href="javascript:presentacionPersonal()"> Presentación Personal </a></li>
        </ul>
    </li>
 
    <li>
        <a href="#"> Despedida </a>
        <ul>
            <li> <a href="javascript:mostrarProx();"> Solicitar Fecha proxima Visita  </a></li>
            <li> <a href="javascript:despedida();">  Salir  </a></li>
        </ul>
    </li>
 
</ul>
</div>
 
<div id="datosPersonales" style="display:none">
<table>
    <tr>
           <td>Rut: </td>
           <td> <input type="text" id="txtRut"/>
    </tr>
    <tr>
            <td>Nombre</td>
            <td><input type="text" id="txtNombre"/></td>
    </tr>
    <tr>
            <td>Apellido</td>
            <td><input type="text" id="txtApellido"/></td>
    </tr>
    <tr>
            <td>Calle</td>
            <td><input type="text" id="txtCalle"/></td>
    </tr>
        <tr>
            <td>Comuna</td>
            <td><input type="text" id="txtComuna"/></td>
    </tr>
        <tr>
            <td>Telefono</td>
            <td><input type="text" id="txtTelefono"/></td>
    </tr>
        <tr>
            <td>Fecha Nacimiento</td>
            <td><input type="text" id="txtNacimiento"/></td>
    </tr>
    <tr>
    <td> <input type="button" id="enviarDatos" value="Enviar" /></td>
    </tr>
    
    <tr>
    <td colspan="2" align="center"><span></span>  </td>
</table>
 

CSS

Código CSS:

#datosPersonales
{
position: absolute;
border: 1px solid black;
left: 23%;
top: 13%;
padding: 20px;
    border: 1px solid black;  
    background-color: #f3f3f3;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 9px;  
    box-shadow: 5px 5px 2px gray;
font: calibri cursive;  
}
 

JavaScript

Código Javascript:

function datosPersonales(){
                            div=document.getElementById('datosPersonales');
                            div.style.display =  '';
        $("#enviarDatos").click(function() {
                            rut = $("#txtRut").val();
                            nombre = $("txtNombre").val();
                            apellido = $("txtApellido").val();
                            calle = $("txtCalle").val();
                            telefono = $("txtTelefono").val();
                            fechNacimiento = $("txtNacimiento").val();
        alert(nombre)
    });
        $("#datosPersonales").hover(function(){},function(){ 
        $("#datosPersonales").css("display","none");  
    });
}
 

Con eso, al pasar el mouse por el DIV de DatosPersonales, este se oculta

Saludos!