:hover select target only, not parents with same class

css hover
css selectors
how to make hovering over one div to trigger changes in another div?
css hover change another div
css hover parent not child
css hover not working
css parent selector
css hover only current element

How do I make this only fire :hover for the target element (ignoring the parents)?

Assume this is recursive design of object inside object, therefore with the same classes and an autogenerated id.

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

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}
<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

Since you tagged the question with javascript you can achieve this using it. The key is to use .stopProgagation() which will stop events from "falling through" down to your other elements.

See example below:

document.querySelectorAll(".group").forEach(elem => {
  elem.addEventListener('mouseover', function(e) {
    e.stopPropagation();
    this.classList.add('group-hover');
  });
  
  elem.addEventListener('mouseout', function(e) {
    this.classList.remove('group-hover');
  });
});
.group-hover {
  background-color: red;
}

.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}
<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

javascript, .group:hover { background-color: red; } .group { border: 1px solid black; width: 100px; padding: 20px; } <div id="g1" class="group">aaaa <div� I should also add that Shaun Inman's E < F proposal is the same as E:has(s) - and therefore I don't think it has legs. So maybe back to the :parent selector.:parent selector. Jonathan has a really useful example of how the :last-child selector works and how it applies live in the browser (see the section called "How do browsers actually handle

Only with JS, and using events delegate for simpler way

const All_g = document.querySelector('#g1');

All_g.onmouseover = function(event) {
  let target = event.target;
  target.style.background = 'red';
};

All_g.onmouseout = function(event) {
  let target = event.target;
  target.style.background = '';
};
.group {
  border: 1px solid black;
  width: 100px;
  padding: 20px;
}
<div id="g1" class="group">aaaa
  <div id="g2" class="group">bbbb
    <div id="g3" class="group">cccc
    </div>
  </div>
</div>

Hover on "Everything But", Hover states are easy, but what if you want to apply a hover state to every CSS properties to all the children of the parent when the parent is in the hover state. use JavaScript to detect mouseenter events on them and apply/remove class I did something like this a while back as well, but didn't use the same kind of� Think of a multi-level dropdown menu. Some of the LI’s also contain another UL, but some do not. It would be cool to target only the one’s which are parent to another level, so you could, for example, apply an arrow indicator that this list item contains a sub menu. Right now there is no selector you can write to target a LI that contains a UL.

You can do it in the following way:

var elements = document.getElementsByClassName('group');
var lastElement = null;
elements.each(element =>{
    lastElement = element;
});
lastElement.on('hover', function(){
    //do anything you wish with element
})

Be able to target child elements on hover, with custom 'state' � Issue , To be able to not just add :hover, :focus, :before, etc.. but to include more complicated .parent:hover .child-2 (or they could just use same class on child obv); In builder, the I then click on the span and click on State button. There have been occasions where I’ve wished I was able to select a parent element with CSS–and I’m not alone on this matter.However, there isn’t such thing as a Parent Selector in CSS, so it simply isn’t possible for the time being.

Approach 1

Register hover event to toggle class and use event.stopPropagation();

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

The bubbles read-only property of the Event interface indicates whether the event bubbles up through the DOM or not.

https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles

Approach 2

Mouseenter event - By design it does not bubble - so don't have to perform event.stopPropagation()

Though similar to mouseover, it differs in that it doesn't bubble and that it isn't sent to any descendants when the pointer is moved from one of its descendants' physical space to its own physical space.

https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event

Selectors, The link pseudo-classes. E:active. E:hover. E:focus, Matches E during certain user actions. If the universal selector is not the only component of a simple selector, the The selector matches if E1 and E2 share the same parent in the document in a DTD or elsewhere, but cannot always be selected by attribute selectors. The parent selector, &, is a special selector invented by Sass that’s used in nested selectors to refer to the outer selector. It makes it possible to re-use the outer selector in more complex ways, like adding a pseudo-class or adding a selector before the parent.

Complex Selectors, The class selector identifies an element based on its class attribute value, which At times only the direct children of a parent element need to be selected, not based on their sibling elements, those which share the same common parent. The most common pseudo-class, and one you've likely seen before, is :hover . Select all elements with the class name callout that are decendents of the element with an ID of header. Here is the “plain English” of “#header.callout”: Select the element which has an ID of header and also a class name of callout .

:hover, The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. The traditional way would probably be to give each link a class name in which to target, but that requires additional markup which is always a nice thing to avoid (semantics and all). Another way might be to use :nth-child , but that requires their order to never change.

CSS Pseudo-classes, selected link */ Pseudo-class names are not case-sensitive. An example of using the :hover pseudo-class on a <div> element: :only-of-type, p:only-of-type, Selects every <p> element that is the only <p> element of its parent :target, # news:target, Selects the current active #news element (clicked on a URL containing� Anyway, might be that wordpress puts some extra tags in your structure and the general siblings selector(~) works only with sibling tags, you can’t traverse up one level to the parent to look for it’s sibling tags.So the html part has to remain the same way as in your final code in jsfiddle.The left side div-s can’t have a wrapper.

Comments
  • also you can check there stackoverflow.com/questions/14792574/…
  • I don't think you can. Since c is structurally included in a, when you hover c you necessarily hover a too.
  • I'm wondering if mouseout and mouseover could be used, or if they'd have the same issue (of parent being assumed to have a mouseover)
  • That wouldn't work if I e.g. hovered over g2 - in which case g2 should apply the hover style (and not g1). Unless you're saying we should run this code every time the mouse moves?
  • As far as I understand you only need hover effect on the last item, right? If yes, so attach the hover effect on document ready, and that'll will work
  • Nope, I need to hover on whatever is under the mouse, and not any parents. So in the above example, g1 OR g2 OR g3 depending which one the pointer is physically over.