0

Let's say you have this selector:

#myElement:hover .aClassThatsUsedAcrossThePage {
   outline: 1px solid red;
}

Will it select anything across the page or only descendants? I can only get it to select descendant elements.

.main {
   background: lightblue;
   width: 100px;
   border: 1px solid gray;
}

.show {
    background-color: lightgray;
}

/* select any descendant element that uses .show */
.main:hover > .show {
    outline: 2px solid red;

}

/* select any element that uses .show */
.main:hover .show {
    outline: 1px solid red;

}
<div class="main">
   main class
   <div class="show">
        test
   </div>
</div>
<div class="show">
   Hello world
</div>
TylerH
  • 20,799
  • 66
  • 75
  • 101
1.21 gigawatts
  • 16,517
  • 32
  • 123
  • 231
  • 1
    You should spend some time learning about how CSS selectors work: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors – TylerH Aug 02 '21 at 18:48
  • 1
    If you want to apply styles to elements all over the page based on the hover of another element that may or may not be near the others in the HTML, you need to use JavaScript to listen to for that event and toggle the CSS class that you want to apply while hover is active. – TylerH Aug 02 '21 at 18:49
  • That's what I thought but I know there are new things in CSS3+CSS4 that may address this. – 1.21 gigawatts Aug 02 '21 at 18:51
  • There is no such thing as CSS4, and CSS3 is just "CSS" now (since like 2016), as each CSS Module advances in version independent of any other modules. If you are reading material that uses the term "CSS3", then you're probably reading out-of-date stuff. if you're reading material that uses the term "CSS4", run away and never look back. – TylerH Aug 02 '21 at 18:54

1 Answers1

0

I think there is a better way out here using CSS variables and some JS. I think there is no way to do it just using CSS.

document.querySelector('.main').onmouseover = ()=>{
document.documentElement.style.setProperty('--out','2px solid red')
}

document.querySelector('.main').onmouseout = ()=>{
document.documentElement.style.setProperty('--out','none')
}
:root{
--out:none;
}
.main {
   background: lightblue;
   width: 100px;
   border: 1px solid gray;
}

.show {
    outline:var(--out);
    background-color: lightgray;
}

/* select any descendant element that uses .show */
.main:hover > .show {
    outline: 2px solid red;

}

/* select any element that uses .show */
<div class="show">
   Hello world
</div>
<div class="main">
   main class
   <div class="show">
        test
   </div>
</div>
<div class="show">
   Hello world
</div>

<div class="show">
   Hello world
</div>
Keshav Bajaj
  • 863
  • 1
  • 5
  • 13