I would like all elements with the class "hoverOutline" to have an outline when you hover over them. This CSS works mostly fine:

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

Only problem is this causes any parent elements with that class to have an outline as well. I understand that this is intended (as you are hovering over them too), but I would like to only outline the innermost child.(the one that would trigger an event first onclick).

I would like to add that I have looked into this, and most people use JQuery or some hacky work-around in pure CSS. For me, Javascript is 100% okay.

EDIT: This is for a bookmarklet, so I can't know in advance what elements will be on the page. This must work for ALL elements with that class, but that don't have a child with that class..

I would like all elements with the class "hoverOutline" to have an outline when you hover over them. This CSS works mostly fine:

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

Only problem is this causes any parent elements with that class to have an outline as well. I understand that this is intended (as you are hovering over them too), but I would like to only outline the innermost child.(the one that would trigger an event first onclick).

I would like to add that I have looked into this, and most people use JQuery or some hacky work-around in pure CSS. For me, Javascript is 100% okay.

EDIT: This is for a bookmarklet, so I can't know in advance what elements will be on the page. This must work for ALL elements with that class, but that don't have a child with that class..

• javascript
• html
• css

• I tried that, but it didn't seem to fix the problem. Am I doing something wrong? – Isaac Chen Commented Oct 28, 2017 at 16:54
• 1 .hoverOutline:hover try removing the space between the 2 words – zer00ne Commented Oct 28, 2017 at 16:56
• remove the class from the parent elements – Andy Ray Commented Oct 28, 2017 at 16:58
• Andy Ray how could that be done with JS? (or CSS but as far as my research goes that isn't possible). I can't figure out how to detect if an element has a child with that class. – Isaac Chen Commented Oct 28, 2017 at 17:01

3 Answers 3

The element Selector are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

that mean you can have the same class but define the tag with that class to handle see examlpe

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>

Update

Demo 2 uses JavaScript to isolate and outline elements that meet two requirements:

1. Must have the .hover class
2. Must not have any descendants with the class .hover

Note: The <legend> has .hover class as well (actually everything has .hover), so as it fulfills the requirements, it too has the hover effects.

If the post you have submitted has no typos then the problem is pretty simple. A pseudo-class like :hover has a specific syntax in that it suffixes the targeted selector like so:

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

To address the parent having the same class and you need to exclude the parent, try using the parent's tagName like so:

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

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

In these 2 rulesets the second one is applied to the parent by specifying it's a <section> and placing it after the original ruleset which is more general and lower in specificity.

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>

try this

$(".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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hoverClass1">
    <input type="text" class="hoverClass1" placeholder="hover me !!">
</div>