1

Mi idea es simple, aunque no sé si posible (Empecé hace menos de una semana con HTML Y CSS, y todavía estoy explotando lo más posible CSS antes de entrar en JavaScript) Lo que quiero hacer es que por ejemplo, tengo una imagen, y si yo le hago clic a la imagen, que aparezca un texto que tiene al lado (que esta oculto con el comando opacity: 0;) Lo que pasa es que se me ocurre hacer .img:hover { opacity: 1; } Pero no sé cómo hacer para que se comando de Opacity que esta siendo activado por el hover afecte al texto que tiene al lado, y no a la imagen en sí. Disculpen si no me di a entender, la verdad entiendo lo básico.


<!DOCTYPE html>
<html>
<head>
<style>
.logo {
  height: 100px;
  width: 100px;
}
.b-logo {
  opacity: 0;
}
    
.div-foto:hover > .b-logo {
  opacity: 1;
}
</style>
</head>
<body>
<div class="div-foto">
  <img src="https://i.imgur.com/lOGOnPr.png" class="logo"><b class="b-logo">Logo Aqui</b>
</div>
</body>
</html>
Podran ver que pude hacer lo que quería, pero extrañamente si cambias la parte .div-foto:hover > .b-logo { por .logo:hover > .b-logo { ,entonces no funciona y cuando pongo el cursor sobre la imagen no sucede nada.

1
  • Disculpen, no dije que quiero que aparezca cuando haga clic, sino simplemente cuando ponga el cursor sobre la imagen.
    – Dazer
    el 12 feb. 2022 a las 5:09

3 respuestas 3

2

Buen día,

Puedes utilizar la propiedad display para mostrar u ocultar objetos, en este enlace puedes ver las opciones

Si usas display: none entonces el elemento no se mostrará y usando algún otro modo entonces se mostrará

Te dejo un ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.hide {
  display: none;
}
    
.myDIV:hover + .hide {
  display: block;
  color: red;
}
</style>
</head>
<body>

<h2>Muestra el elemento al hacer "hover"</h2>

<div class="myDIV">Pon el puntero aquí.</div>
<div class="hide">Ahora soy visible.</div>

</body>
</html>

1
  • Entiendo, gracias por la respuesta. Extrañamente encontré una solución aunque no entiendo cómo. Yo tenía el Div, y dentro la imagen y el texto, y yo ponia el hover en la imagen para que muestre el texto pero no funcionaba. Ahora cambié y puse que el hover sea sobre el div (no sobre la imagen) y da la casualidad que si funciona. Cuando pongo el puntero sobre mi imagen hace aparecer el texto.
    – Dazer
    el 12 feb. 2022 a las 5:27
1

Abundando en lo que te respondió @HeytalePazguato, que correctamente mostró el uso de + para dar estilo a un elemento sujeto a que se presente en combinación con un determinado sibling. El nombre oficial de este operador es Adjacent sibling combinator

Como en la pregunta pusiste que el comportamiento debiera responder a un click, y la respuesta ocupa hover, dejo acá mi receta para que la visibilidad de un elemento pueda activarse o desactivarse con un click.

.toggable {
  opacity: 0;
  transition: opacity 0.4s;
  flex-grow: 1;
  text-align: center;
}

#toggle:checked+.toggable {
  opacity: 1;
}

.container {
  display: flex;
  justify-content: space-around;
}
<div class="container">
  <label class="toggle_label" for="toggle">Click para mostrar/ocultar</label>
  <input type="checkbox" id="toggle">
  <div class="toggable">Me ven?</div>
</div>

Básicamente, utilizo un checkbox (porque tiene estado, y el seudoselector :checked me permite condicionar a sus elementos adyacentes). Tenemos un elemento .toggable invisible en condiciones normales y declaramos un estilo:

#toggle:checked + .toggable {
  opacity: 1;
}

Dice que, cuando es precedido por un checkbox checkeado, tiene opacidad 1.

Esta misma técnica se ocupa para darle estilo a los checkboxes en librerías UI. En realidad le dan estilo al label reactivo al estado checked. En el siguiente ejemplo ocultamos el input y usamos el label para indicar el estado.

#toggle+label::before {
  content: 'Click para mostrar'
}

#toggle:checked+label::before {
  content: 'Click para ocultar'
}

.toggable {
  opacity: 0;
  transition: opacity 0.4s;
  flex-grow: 1;
  text-align: center;
}

#toggle:checked ~ .toggable {
  opacity: 1;
}

.container {
  display: flex;
  justify-content: space-around;
}

label {
  color: white;
  padding: 0.4em;
  background-color: #0063bf;
}

#toggle {
  display: none;
}

#toggle:checked+label {
  color: #0063bf;
  background-color: #99ccff;
  transition: background-color 0.4s;
}
<div class="container">
  <input type="checkbox" id="toggle">
  <label for="toggle"></label>
  <div class="toggable">Me ven?</div>
</div>

En este ejemplo fíjate que el label está entre el input y el contenedor invisible, por lo que usé el estilo

#toggle:checked ~ .toggable {
  opacity: 1;
}

Que condiciona el estilo sin requerir que los elementos sean consecutivos.

0

espero estés bien! voy agregar las 2 opcione, una onclick con solo css y la otra :hover espero te sirvan!

index.html

<!-- onclick -->
<div id="onclick">
  <input id="mostrar" type="checkbox" name="mostrar"/>
  <label for="mostrar">mostrar</label>
  <img src="https://images.unsplash.com/photo-1642019275442-d9622e4a27ab?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDY3MTYwMw&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=400" alt=""/>
  <p>Lorem ipsum dolor sit.</p>
</div>

<!-- hover -->

<div id="hover">
  <img src="https://images.unsplash.com/photo-1642019275442-d9622e4a27ab?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0NDY3MTYwMw&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=400" alt=""/>
  <p>Lorem ipsum dolor sit.</p>
</div>

¡Es hora del CSS!

Lo primero que debemos hacer es darle un tamaño al <div id="onclick"> y al <div id="hover" (digamos 200px) y también un position relative (esto es importante) para que el contenido no se desborde al usar un position:absolute; en lo elementos anidados. Tambien agrego un float irrelevante y un margin, solo para que se vea lindo jajaja

#onclick, #hover { width: 200px; position: relative; float: left; margin: 0 1em; }

El input #onclick lo seteamos con #onclick input{display: none;}
Nuestro va a ser la jugada secreta, le agrego a este un cursor: pointer; esto servirá para que al momento de pasar el mouse sobre la imagen de a entender que tiene una acción.

#onclick label {
 position: absolute;
 width: 100%;
 height: 100%;
 cursor: pointer;
}

Al tag #onclick img, #hover img le agregamos un width del 100% del div contenedor: #onclick img, #hover img { width: 100%; }

agregamos la opacidad al texto: #onclick p, #hover p {opacity: 0;

por último agregamos el evento onclick para mostrar el texto:

#mostrar:checked ~ p { opacity: 1; }

Para que el evento hover se lance le agregamos a el div contenedor

#hover:hover p { opacity: 1; }

la virgulilla ~ funciona como un buscador del tag, clase, id, type; cuando lo encuentra lanza el evento.

style.css

*,
*:after,
*:before {
  box-sizing: border-box;
}
#onclick,
#hover {
  width: 200px;
  position: relative;
  float: left;
  margin: 0 1em;
}

#onclick input {
  display: none;
}

#onclick label {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

#onclick img,
#hover img {
  width: 100%;
}

#onclick p,
#hover p {
  opacity: 0;
}

#onclick #mostrar:checked ~ p {
  opacity: 1;
}

#hover:hover p{
  opacity: 1;
}

Saludos!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.