html - tbody - ¿Cómo se teclea el elemento padre al pasar el elemento secundario?

etiqueta acronym html

Question

Sé que no existe un selector padre CSS , pero ¿es posible diseñar un elemento parental al desplazar un elemento secundario sin dicho selector?

Para dar un ejemplo: considere un botón de eliminar que cuando esté en blanco resaltará el elemento que está a punto de eliminarse:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Por medio de CSS puro, ¿cómo cambiar el color de fondo de esta sección cuando el mouse está sobre el botón?

Answer 1

¡Esto es extremadamente fácil de hacer en Sass! No ahonde en JavaScript para esto. El & selector en sass hace exactamente esto.

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand

Answer 2

Bueno, esta pregunta se hace muchas veces antes, y la respuesta típica corta es: no se puede hacer con CSS puro. Está en el nombre: las Hojas de estilo en cascada solo admiten el estilo en cascada, no hacia arriba.

Pero en la mayoría de las circunstancias en 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 esta pseudo marcado:

<parent>
    <sibling></sibling>
    <child></child>
</parent>

El truco es darle al hermano el mismo tamaño y posición que el padre y darle estilo al hermano en lugar del padre. ¡Esto se verá como el padre tiene un estilo!

Ahora, ¿cómo darle estilo al hermano?

Cuando el niño está suspendido, el padre también lo está, pero el hermano no. Lo mismo aplica para el hermano. Esto concluye en tres posibles rutas de selector de CSS para diseñar el hermano:

parent sibling { }
parent sibling:hover { }
parent:hover sibling { }

Estos diferentes caminos permiten algunas buenas posibilidades. Por ejemplo, desatar este truco en el ejemplo en 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 dar al hermano el mismo tamaño que el padre, y aún así permitir que el niño aparezca dentro del padre.

A veces es necesario utilizar una ruta de selección 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. Muy bueno realmente.

Answer 3

Como se mencionó anteriormente, "no hay un selector de CSS para seleccionar un elemento primario de un elemento secundario seleccionado".

Entonces usted:

• utilice un hack CSS como se describe en la respuesta de NGLN
• use javascript, junto con jQuery es muy probable

Aquí está el ejemplo de la solución javascript / jQuery

En el lado de javascript:

$(''#my-id-selector-00'').on(''mouseover'', function(){
  $(this).parent().addClass(''is-hover'');
}).on(''mouseout'', function(){
  $(this).parent().removeClass(''is-hover'');
})

Y en el lado de CSS, tendría algo como esto:

.is-hover {
  background-color: red;
}

Answer 4

Encuentro el más conveniente y el más fácil para mí para ser algo como esto:

CSS

.main-nav > li:hover > a {
  background: #000;
}

Dónde

HTML

<ul class="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
        <ul class="main-sub-nav">
            <li><a href="#">About Sub 1</a></li>
            <li><a href="#">About Sub 2</a></li>
        </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
</ul>

Answer 5

Esta solución depende completamente del diseño, pero si tiene un div principal que desea cambiar el fondo al pasar el ratón sobre un elemento secundario, puede intentar imitar al padre con un ::after / ::before .

<div class="item">
    design <span class="icon-cross">x</span>
</div>

CSS:

.item {
    background: blue;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}
.item span.icon-cross:hover::after {
    background: DodgerBlue;
    border-radius: 10px;
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
}

Vea un ejemplo completo de violín aquí

Answer 6

Otro enfoque más simple (a una pregunta anterior)
sería colocar elementos como hermanos y usar:

Selector de hermanos adyacente ( + ) o Selector general de hermanos ( ~ )

<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;
}

Demo Fiddle aquí .

Answer 7

Sé que es una vieja pregunta, pero me las arreglé para hacerlo sin un pseudo niño (pero una pseudo envoltura).

Si configuras el elemento primario sin pointer-events y luego un elemento secundario con pointer-events configurados en auto , funciona :)
Tenga en cuenta que la etiqueta <img> (por ejemplo) no funciona.
Recuerde también establecer pointer-events en auto para otros niños que tengan su propio detector de eventos, o de lo contrario perderán su funcionalidad de clic.

Margen:

<div_parent>
    <div_child></child>
</parent>  

Y el CSS:

.div_parent {  
    pointer-events: none;
}

.div_child {
    pointer-events: auto;
}

.div_parent:hover {
    opacity: 0.5;
}    

Editar:
Como Shadow Wizard señaló amablemente: vale la pena mencionar que esto no funcionará para IE10 y versiones posteriores. (Las versiones anteriores de FF y Chrome también, ver here )

Answer 8

no hay selector de CSS para seleccionar un padre de un niño seleccionado.

puedes hacerlo con JavaScript