Realizar hover sobre un elemento y ocultar otro

ayax2207 · #1 (**permalink**) 19/10/2011, 10:30

Buen día, soy nuevo en el foro, espero seguir las reglas y si no ofrezcos disculaps con antelación.
Lo q deseo es con css, poder pasar el mouse soble un elemento y que otro se oculte. Lo que quiero es q el elemento q se oculte no sea ni hijo ni está incluido dentro dl elemento al cual le haré el hover. Se puede??.
Muchas gracias.

Kurassier · #2 (**permalink**) 19/10/2011, 11:37

Hola!

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

HTML

Código HTML:

Ver original<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:

Ver original#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:

Ver originalfunction 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!

IsaBelM · #3 (**permalink**) 19/10/2011, 13:43

antes de intentarlo con un framework, por dios, prueba con adyacente

Cita:

a:hover ~ p#ocultar

kseso? · #4 (**permalink**) 19/10/2011, 13:47

ayax2207:
Debería adjuntar los códigos implicados: css + html
Mientras, una pista: selector de hermanos o selector de hermano adyacente.

El código concreto dependerá de su marcado (qué etiquetas usa y cómo lo tiene estructurado).

ayax2207 · #5 (**permalink**) 20/10/2011, 07:44

Gracias Kurassier, excelente aporte, pero creo q noo fui claro y quiero una solución solo css. Gracias de nuevo.

ayax2207 · #6 (**permalink**) 20/10/2011, 07:47

Gracias kseso?, claro tienes razón, en un momento coloco algún código. Gracias de nuevo.

ayax2207 · #7 (**permalink**) 20/10/2011, 08:02

Algo así:

Código HTML:

<body>
<div id="con">
<div id="uno">uno</div>
<div id="dos">dos</div>
<div id="tres">tres</div>
<div id="ocultar">ocultar</div>
</div>
</body>

Código CSS:

Ver original#ocultar:hover #uno{
    color:#F00;
}

Es decir al pasar por "#ocultar", cambie el color del texto de "#uno".
Gracias.

ayax2207 · #8 (**permalink**) 20/10/2011, 08:04

Hola IsaBelM, he estado probando con adyacencia ... pero no me da......... seguiré en esas, claro q adjunté el código q quisiera trabajar, npor si me puedes dar una ayuda dsde allí. Gracias.

kseso? · #9 (**permalink**) 22/10/2011, 15:15

Es porque no tiene en cuenta un pequeño detalle en el html. A ver si lo descubre:

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
* {
  margin:0; padding:0; position: relative;
}
#con {
    width: 600px;
    margin: 0 auto;
    overflow: hidden;
    background: #d4d4d4;
}
#uno, #dos, #tres {
  float:left;
  width: 200px;
  height: 250px;
  color: #603;
  padding-bottom: 40px;
}
#dos {
  background: #fff;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#ocultar {
  position: absolute;
  bottom: 0;
  left:0;
  width: 100%;
  height: 40px;
  background: #fc0;
  text-align: center;
  z-index: 5;
}
#ocultar:hover { cursor: pointer;}
#ocultar:hover ~ #dos {
  color: #fff;
  background: #404040;
  font-size: 400%;
  -moz-transition: all 1s;
  -webkit-transition: all 1s;
  transition: all 1s;
}
</style>    
</head>
<body>
<div id="con">
  <div id="ocultar">ocultar</div>
  <div id="uno">uno</div>
  <div id="dos">dos</div>
  <div id="tres">tres</div>
</div>
</body>
</html>

IsaBelM · #10 (**permalink**) 23/10/2011, 07:08

no es posible hacerlo tal y como tienes planteado los elementos en el html, puesto que no existe ninguna combinación ascendente. la opción que te queda es modificar el html, como te indican. en caso que no puedas modificarlo, la única opción que te queda es javascript. y dijo javascript, no jquey o cualquier otro frameworks, a no ser que ya estés usando alguna librería