Childrens Selectors from Sibling Parent Divs Using CSS for Hover Effect

childrens selectors from sibling parent divs using css for hover effect

You can't go back in the DOM with pure CSS, that is why it is only possible to select childs, siblings and childs of siblings when hovering an element. The following demonstrates what currently can be selected by hovering the first parent:

#parent1:hover > div {  color: blue;}#parent1:hover > div > div {  color: purple;}#parent1:hover ~ div {  color: red;}#parent1:hover ~ div > div {  color: orange;}#parent1:hover ~ div > div > div {  color: green;}
#parent1 {  border: 1px solid blue;}div {  margin: 5px 0;}div > div {  margin-left: 15px;}

<div id="parent1">  Parent1 (target)  <div>Child1    <div>Child2</div>  </div></div>
<div>  Parent2  <div>Child1    <div>Child2</div>  </div></div>

Hover element, show hover effect on parent elements siblings child

I got your point what you are trying to do here, in this case, you can use the selector below.. so that when the li is hovered, it will also apply the color to the first span

.row:hover span:nth-of-type(1) {
   color: red;
}

I just inspected the DOM in your fiddle and I would like to alter some things in that..

Demo (hover an of the hello and see the very first span color will be changed)

Demo 2 (DOM Altered) - This is just a general idea, I've provided you the selector but this will need the DOM alteration anyways..

---

Altered Demo in your Code

---

Again as per your comment, now you can highlight all span along with their titles

ul li div.row:hover > span {
   color: red;
}

Final Demo

How to style the parent element when hovering a child element?

I know it is an old question, but I just managed to do so without a pseudo child (but a pseudo wrapper).

If you set the parent to be with no pointer-events, and then a child div with pointer-events set to auto, it works:)

Note that <img> tag (for example) doesn't do the trick.

Also remember to set pointer-events to auto for other children which have their own event listener, or otherwise they will lose their click functionality.

div.parent {      pointer-events: none;}
div.child {    pointer-events: auto;}
div.parent:hover {    background: yellow;}    

<div class="parent">  parent - you can hover over here and it won't trigger  <div class="child">hover over the child instead!</div></div>

CSS Select ALL Siblings before current hover item

Another solution by just reversing the order of the stars:

.wrap {
  display: flex;
  flex-direction: row-reverse;
  width: min-content;
}
.miniRankButton {
    display: inline-block;
    background: #FFF;
    border: none;
    font-size: 22pt;
    color: #BDBDBD;
}

.miniRankButton:hover {
    color: #FFE136;
}

.miniRankButton:hover  ~ .miniRankButton{
    color: #FFE136;
}

<div class="wrap">
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
    <button class="miniRankButton">★</button>
</div>

Change color of sibling elements on hover using CSS

There is no CSS selector that can do this (in CSS3, even). Elements, in CSS, are never aware of their parent, so you cannot do a:parent h1 (for example). Nor are they aware of their siblings (in most cases), so you cannot do #container a:hover { /* do something with sibling h1 */ }. Basically, CSS properties cannot modify anything but elements and their children (they cannot access parents or siblings).

You could contain the h1 within the a, but this would make your h1 hoverable as well.

You will only be able to achieve this using JavaScript (jsFiddle proof-of-concept). This would look something like:

$("a.button").hover(function() {
    $(this).siblings("h1").addClass("your_color_class");
}, function() {
    $(this).siblings("h1").removeClass("your_color_class");
});

Change another div on hover which is not sibling nor child

There is no way without using javascript to affect a different non-sibling selector. But you an do it if you move the hover up one level.

You need to put the hover on the first navbar and using the direct sibling combinator (+) - target the other navbar and then inside it to get the .notpro element. Note that I added words to your elements to show the hover effect.

The only other CSS way of doing this is to put both elements inside the one navbar - then they are siblings and can be targetted.

.navbar:hover + .navbar .notpro { color: red;}

<div class="navbar">    <div class="btn-section btn-1">        <p class="section pro">I am a Pro</p>    </div></div>
<div class="navbar">    <div class="btn-section btn-2">        <p class="section notpro">I am Not a Pro</p>    </div></div>

On child hover change the css of Parent

As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.

A rough example:

#main-menu > li:hover > a
{
  background-color: #F00;
}

#main-menu >  li > .submenu > li:hover
{
  background-color:#00F;
}

<ul id="main-menu">
  <li>
    <a href="#">
      <i class="fa fa-building-o" aria-hidden="true"></i>
      Private Limited
      <i class="fa fa-caret-down"></i>
    </a>
    <ul class="submenu">
      <li><a href="#0">Company</a>
      </li>
      <li><a href="#0">Contact</a>
      </li>
      <li><a href="#0">Industry</a>
      </li>
    </ul>
  </li>
</ul>

Child element hover, effect Parent

There's no selectors like that yet but you can use "~" selector.
Here's an excerpt from w3.org

The general sibling combinator is made of the "tilde" (U+007E, ~)
character that separates two sequences of simple selectors. The
elements represented by the two sequences share the same parent in
the document tree and the element represented by the first sequence
precedes (not necessarily immediately) the element represented by the
second one.

So you can do it like that:

HTML:

<div class="parent-like-div">Do Something</div>
<div class="to-be-controlled">Control me</div>

CSS:

.parent-like-div:hover ~ .to-be-controlled
{your code apply on .to-be-controlled when you hover .parent-like-div}

http://jsfiddle.net/h7grfeod/

---

Related Topics