Solución:
En realidad, esta fue una solución sorprendentemente fácil una vez que comprendió la estructura y el problema real. Div cubriendo div. Primero deshabilita todos los eventos de clic en todo dentro .bracket-part ya que no son necesarios. Luego, vuelve a agregar los eventos de clic a las selecciones. Para hacerlo más genérico y facilitar su uso de nuevo, puede cambiarlo fácilmente. select en el selector de CSS una clase .re-enable-events o algo. El JS sobre el índice z no era realmente necesario.
#bracket-wrapper .bracket-part select
pointer-events: all !important;
#bracket-wrapper .bracket-part
pointer-events: none;
Ver: https://jsfiddle.net/uws8pf1y/
Los eventos de puntero tienen una tasa de compatibilidad muy buena, por lo que esta solución debería funcionar en casi todos los dispositivos.
Para ir directo al grano: hay no limpio Solución de solo CSS para su problema.
Dado que todos sus elementos son prácticamente idénticos (y con eso me refiero al class por ejemplo) no encontrará una solución que cubra todas las configuraciones. Dado que no se diferencian entre sí, todos tienen el mismo z-index pero no el mismo contexto de apilamiento. A menos que les des a sus padres una z-index o cambiar el contexto de apilamiento, no podrá acceder al elemento bloqueado. También se reduce a lo limitado que está al cambiar el código. El código parece haber sido creado por JS y usted lo ha copiado en su violín para que lo probemos.
Intento # 1
El intento n. ° 1 es simplemente agregar alto z-index directamente al padre correspondiente.
@mmshr ya intentó hacer esto. Sin embargo, trat de darle a toda la clase un alto z-index lo cual no va a funcionar, por supuesto, como ya ha señalado.
Sin embargo, puede intentar darle a este elemento un alto z-index elemento en su style attribute. Esto se reduce a lo limitado que está al cambiar el código. Teóricamente, podría usar JQuery para esto, pero la forma en que seleccionaría el elemento (por ejemplo, por nth-child()) me lleva a Intento # 2 que usa la misma pseudoclase y es un intento solo de CSS, por lo que usar JS no tiene sentido en este caso. Por cierto, si puede cambiar su código de esta manera, podría eliminar su pequeña función JQuery que agrega el forward clase en hover.
Intento # 2
Este intento funciona bien y no está limitado por la capacidad de cambiar el código, ya que se trata de una línea de CSS. Como ya se dijo en Intento # 1 podrías usar un pseudo-class para seleccionar este elemento. Sin embargo, esto no es válido para todas las configuraciones. Si agregaras un elemento
(
) antes de su elemento bloqueado tendría que cambiar su CSS cada vez. Pero si no hay necesidad de cambiar elementos y configuraciones (o al menos no el orden) esta es una solución válida:
#bracket-wrapper > div > div:nth-child(8) > div > div
z-index: 2 !important;
En este intento, también puede (y debe) eliminar su pequeña función JQuery:
$('.bracket-part').hover(
function()
debugger;
$(this).addClass('forward');
,
function()
$(this).removeClass('forward');
);
Quita todo.
Intento # 3
Probablemente el mejor y más limpio intento es utilizar el stacking context. El contexto de apilamiento se explica aquí. Pero para darle una descripción general simple (W3C):
Cada caja pertenece a un contexto de apilamiento. Cada caja posicionada en un contexto de apilamiento dado tiene un nivel de apilamiento entero, que es su posición en el eje z en relación con otros niveles de apilamiento dentro del mismo contexto de apilamiento. Las cajas con niveles de pila más altos siempre se formatean frente a las cajas con niveles de pila más bajos. Las cajas pueden tener niveles de pila negativos. Las cajas con el mismo nivel de pila en un contexto de apilamiento se apilan al revés según el orden del árbol del documento.
Lo más importante es esta parte porque se aplica a su estructura:
Las cajas con el mismo nivel de pila en un contexto de apilamiento se apilan al revés según el orden del árbol del documento.
Si echa un vistazo a su árbol HTML, encontrará lo siguiente:
De acuerdo con el contexto de apilamiento, deberíamos poder darle a su elemento en el fondo un orden de apilamiento más alto que su elemento en el frente cambiando el orden de esos elementos en su árbol.
Es solo una suposición, pero probablemente tenga algo como un array donde almacena los datos y algunos archivos JS crean un soporte de torneo a partir de ellos. Si de alguna manera pudiera cambiar el orden de esos dos elementos (por ejemplo, cambiando el orden de su array) no usaría CSS y no usaría ningún JQuery adicional.
¿Y si ninguno de estos funciona?
Bueno, entonces no veo ninguna solución que requiera solo CSS.
También pensé en una posible solución JS, pero esta es difícil y no pude encontrar una solución (simple). Déjame explicarte el problema:
Ya que tu select está detrás de un div elemento JQuery no lo reconocería (por ejemplo) en hover por lo que tendría que usar pseudoclases nuevamente, que ya cubrí con un intento solo de CSS.
También pensé en agregar un z-index de -1 al elemento de bloqueo, porque JQuery podría reconocerlo al pasar el mouse. Pero esto también genera problemas: el elemento de bloqueo ahora está en el fondo y el elemento bloqueado en el frente y también puede hacer clic en él. El problema es que el (antiguo) elemento de bloqueo ahora está detrás del #bracket-wrapper. Esta tampoco es una solución válida porque tendría que usar una pseudoclase nuevamente para apuntar a este elemento específico.
Conclusión
Voy a ser honesto contigo: este árbol de torneos está mal diseñado y estructurado. No debe haber elementos superpuestos o elementos fuera de un contenedor y ciertamente no ambos en combinación. Si ninguno de mis intentos es adecuado, no veo ningún CSS o Solución JS. Al menos no uno simple. Ha proporcionado poca información sobre cómo se construye el árbol de torneos, pero las cosas podrían cambiar si lo hace.
En este estado, creo que reconstruir toda esta estructura es la única solución realmente limpia.
Editar
Solución # 1 por @Deckerz
@Deckerz proporcionó una gran solución que no se centra en el índice z. En cambio, usa pointer-events. Intenté este enfoque pero fallé porque olvidé una parte importante. La lógica detrás de esto es simple:
Primero deshabilita todos los eventos de clic en todo dentro
.bracket-partya que no son necesarios. Luego, vuelve a agregar los eventos de clic a las selecciones. Para hacerlo más genérico y facilitar su uso de nuevo, puede cambiarlo fácilmente.selecten el selector de CSS una clase.re-enable-eventso algo. El JS sobre el índice z no era realmente necesario.#bracket-wrapper .bracket-part select pointer-events: all !important; #bracket-wrapper .bracket-part pointer-events: none;
Sin embargo, esto sigue siendo una solución. Todavía recomiendo reestructurar su código y CSS.
Reseñas y valoraciones del post
Si tienes alguna cuestión y capacidad de aumentar nuestro tutorial puedes añadir un paráfrasis y con gusto lo ojearemos.