Me gustaría que todos los elementos con la clase "hoverOutline" tengan un esquema cuando pases el mouse sobre ellos. Este CSS funciona bien principalmente :

.hoverOutline :hover {
    outline: 2px solid black;
}

El único problema es que esto hace que los elementos principales con esa clase también tengan un esquema. Entiendo que esto es lo que se pretende (ya que también se cierne sobre ellos), pero me gustaría describir solo al niño más interno (el que desencadenaría un evento primero al hacer clic).

Me gustaría agregar que he investigado esto, y la mayoría de la gente usa JQuery o alguna solución hacky en CSS puro. Para mí, Javascript está 100% bien.

EDITAR: Esto es para un bookmarklet, por lo que no puedo saber de antemano qué elementos habrá en la página. Esto debe funcionar para TODOS los elementos con esa clase, pero que no tengan un hijo con esa clase.

1
Isaac Chen 28 oct. 2017 a las 19:48

3 respuestas

La mejor respuesta

Actualizar

La demostración 2 usa JavaScript para aislar y delinear elementos que cumplan dos requisitos:

  1. Debe tener la clase .hover
  2. No debe tener descendientes con la clase .hover

Nota: la <legend> también tiene la clase .hover (en realidad, todo tiene .hover), por lo que, al cumplir los requisitos, también tiene los efectos de desplazamiento.


Si la publicación que ha enviado no tiene errores tipográficos, entonces el problema es bastante simple. Una pseudoclase como :hover tiene una sintaxis específica en el sentido de que sufija el selector de destino así:

.hoverOutline:hover {
    outline: 2px solid black;
}

Para dirigirse al padre que tiene la misma clase y necesita excluir al padre, intente usar el nombre de etiqueta del padre de la siguiente manera:

.hoverOutline:hover {
  outline: 2px solid black;
}

section.hoverOutline:hover {
  outline: 0 none transparent;
}

En estos 2 conjuntos de reglas, el segundo se aplica al padre especificando que es un <section> y colocándolo después del conjunto de reglas original, que es más general y más bajo en especificidad.

Demo 1

.hoverOutline :hover {
  outline: 2px solid black;
}

.hover:hover {
  outline: 2px solid black;
}

fieldset.hover:hover{
  outline:0 none transparent;
}
<fieldset>
  <legend>Incorrectly Syntax</legend>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hov'>hover</button>
  <button class='hoverOutline'>HOVER</button>
  <button class='hoverOutline'>HOVER</button>
</fieldset>

<fieldset class='hover'>
  <legend>Correct Syntax</legend>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
  <button class='hov'>hover</button>
  <button class='hover'>HOVER</button>
  <button class='hover'>HOVER</button>
</fieldset>

Demo 2

window.addEventListener('mouseover', mouseEnter, false);

window.addEventListener('mouseout', mouseLeave, false);

function mouseEnter(e) {
  /* if hovered node is NOT the registered
  || event listener...
  */
  if (e.target !== e.currentTarget) {
    // Reference hovered element
    var tgt = e.target;

    // Reference the first child with .hover
    var kid = tgt.querySelector('.hover');

    /* if hovered node has class .hover and
    || does NOT have a child with class .hover...
    */
    if (tgt.classList.contains('hover') && !kid) {

      // add class .outline to hovered node
      tgt.classList.add('outline');

      // Otherwise do nothing and end function
    } else {
      return;
    }

    // Stop the bubbling phase
    e.stopPropagation();
  }
}

function mouseLeave(e) {

  if (e.target !== e.currentTarget) {
    var tgt = e.target;
    tgt.classList.remove('outline');
  }
  e.stopPropagation();
}
form {
  border: 1px solid black;
}

.outline {
  outline: 3px solid red
}
<form id='form' class='hover'>
  <fieldset class='hover'>
    <legend class='hover'>Correct Syntax</legend>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
    <button class='hov'>hover</button>
    <button class='hover'>HOVER</button>
    <button class='hover'>HOVER</button>
  </fieldset>
</form>
1
zer00ne 28 oct. 2017 a las 18:23

El selector de elementos se utiliza para "encontrar" (o seleccione) elementos HTML en función de su nombre de elemento, id, clase, atributo y más.

Eso significa que puede tener la misma clase pero definir la etiqueta con esa clase para manejar ver examen

a.hoverOutline:hover {
    outline: 2px solid black;
}
a {
 width:220px;
 height:50px;
 display:inline-block;
 background-color:blue;
 color:white;
 line-height:50px;
 text-align:center;
 margin:auto;
}
div.hoverOutline{
 width:420px;
 height:100px;
 display:inline-block;
 background-color:green;
 
}
<div class="hoverOutline"><a class="hoverOutline"> This a tag mast outline on hover</a></div>
3
M0ns1f 28 oct. 2017 a las 17:02

Probar esto

$(".hoverClass1").hover(function(){
    $(".hoverClass2").removeClass("hoverClass2");
    $(this).addClass("hoverClass2");
},function(){
    $(this).removeClass("hoverClass2");
});
.hoverClass:hover{
    border:1px solid red
}

.hoverClass1{
}

.hoverClass2{
    border:1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverClass1">
    <input type="text" class="hoverClass1" placeholder="hover me !!">
</div>
1
Dhaval Pankhaniya 28 oct. 2017 a las 17:13