¿Cómo aplicar estilo al elemento principal al pasar el cursor sobre un elemento secundario?
Sé que no existe un selector principal CSS , pero ¿es posible diseñar un elemento principal al pasar el cursor sobre un elemento secundario sin dicho selector?
Para dar un ejemplo: considere un botón de eliminación que, cuando se coloca sobre él, resaltará el elemento que está a punto de eliminarse:
<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>
Mediante CSS puro, ¿cómo cambiar el color de fondo de esta sección cuando el mouse está sobre el botón?
Sé que es una vieja pregunta, pero logré hacerlo sin un pseudo hijo (sino un pseudo envoltorio).
Si configura el padre con no pointer-eventsy luego un hijo divcon pointer-eventsset to auto, funciona :)
Tenga en cuenta que la <img>etiqueta (por ejemplo) no funciona.
También recuerde configurarlo para otros niños que tengan su propio detector de eventos; de lo contrario, perderán la funcionalidad de hacer clic pointer-events.auto
div.parent {
pointer-events: none;
}
div.child {
pointer-events: auto;
}
div.parent:hover {
background: yellow;
} <div class="parent">
parent - you can hover over here and it won't trigger
<div class="child">hover over the child instead!</div>
</div>Editar:
Como señaló amablemente Shadow Wizard : vale la pena mencionar que esto no funcionará para IE10 y versiones inferiores. (Versiones antiguas de FF y Chrome también, consulte aquí )
Bueno, esta pregunta se ha hecho muchas veces antes, y la respuesta típica corta es: No se puede hacer con CSS puro. Está en el nombre: Cascading Style Sheets solo admite estilos en dirección en cascada, no hacia arriba.
Pero en la mayoría de las circunstancias en las que se desea este efecto, como en el ejemplo dado, todavía existe la posibilidad de utilizar estas características en cascada para alcanzar el efecto deseado. Considere este pseudo marcado:
<parent>
<sibling></sibling>
<child></child>
</parent>
El truco consiste en darle al hermano el mismo tamaño y posición que el padre y diseñar al hermano en lugar del padre. ¡Esto se verá como si el padre tuviera el estilo!
Ahora bien, ¿cómo peinar al hermano?
Cuando se controla al niño, el padre también lo hace, pero el hermano no. Lo mismo ocurre con el hermano. Esto concluye en tres posibles rutas de selección de CSS para diseñar el hermano:
parent sibling { }
parent sibling:hover { }
parent:hover sibling { }
Estos diferentes caminos permiten algunas buenas posibilidades. Por ejemplo, usar este truco en el ejemplo de la pregunta da como resultado este violín :
div {position: relative}
div:hover {background: salmon}
div p:hover {background: white}
div p {padding-bottom: 26px}
div button {position: absolute; bottom: 0}
Obviamente, en la mayoría de los casos este truco depende del uso del posicionamiento absoluto para darle al hermano el mismo tamaño que el padre y aún así dejar que el niño aparezca dentro del padre.
A veces es necesario utilizar una ruta de selector más calificada para seleccionar un elemento específico, como se muestra en este violín que implementa el truco varias veces en un menú de árbol. Bastante bonito de verdad.
En 2022:
Esto ahora se puede lograr solo con CSS, usando la :haspseudoclase y la siguiente expresión:
div:has(button:hover) {}
Aquí hay un fragmento que muestra la propuesta original:
div:has(button:hover) {
background-color: cyan;
}<div>
<p>Lorem ipsum ...</p>
<button>Delete</button>
</div>La compatibilidad con el navegador generalmente puede considerarse imperecedera. Ver soporte aquí .
Otro enfoque "alternativo" más simple (a una vieja pregunta)
sería colocar elementos como hermanos y usar:
Selector de hermanos adyacentes ( +)
o
Selector de hermanos general ( ~)
<div id="parent">
<!-- control should come before the target... think "cascading" ! -->
<button id="control">Hover Me!</button>
<div id="target">I'm hovered too!</div>
</div>
#parent {
position: relative;
height: 100px;
}
/* Move button control to bottom. */
#control {
position: absolute;
bottom: 0;
}
#control:hover ~ #target {
background: red;
}
Demostración de Violín aquí .
no hay un selector de CSS para seleccionar un padre de un niño seleccionado.
podrías hacerlo con JavaScript
