Change Color of Sibling Elements on Hover Using Css

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 css on hover of sibling element

Your question isn't much clear, but there are two possibilities right now! have stated as Demo1 and Demo2

/* hover over logo - hides next text */
.demo-1 #test.logo:hover + .menu__dropdown--femme {  display: none;  height: 500px;}/* hover over next text hides logo */
.demo-2 .menu__dropdown--femme:hover + #test.logo {  display: none;  height: 500px;}h1 {  color: red}

<div class="demo-1">  <h1>Demo 1</h1>


  <div id="test" class="logo">    <a href="#">      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">    </a>  </div>  <div class="menu__dropdown--femme" style="text-align: right;">    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>  </div>
</div>

<hr>
<div class="demo-2">  <h1>Demo 2</h1>  <div class="menu__dropdown--femme" style="text-align: right;">    <a href="" class="menu__dropdown__link--femme">SHOP FEMME</a>  </div>
  <div id="test" class="logo">    <a href="#">      <img src="http://demandware.edgesuite.net/aagb_prd/on/demandware.static/-/Sites-DK-Library/default/dwa0382f45/selected/UNISEX/SELECTED_FEMME_HOMME_logo.png" style="width: 200px;height:40px;">    </a>  </div>

</div>

change style of all sibling element when hover?

Sure, it's possible. I've added the style below. You can see it working on this codepen. It relies on detecting hover on the parent, as well as the individual child.

If you plan on putting more content in main, you could wrap the a tags in a div, then target div:hover instead.

<div class="main">
    <a href="" target="_blank">
        a
    </a>

    <a href="" target="_blank">
        b
    </a>

    <a href="" target="_blank">
        c
    </a>

    <a href="" target="_blank">
        d
    </a>
</div>

<style>
.main a {
    background: blue;
    width: 50px;
    height:50px;
    display: inline-block;
    color: #ffffff;
}

.main:hover a {
  opacity: 0.5;
}

.main:hover a:hover {
  opacity: 1;
}
</style>

SCSS Change sibling color on hover

You can not affect the other a tags when one is hovered. Your only real option here is to apply the "other" colour when the ul is hovered, and then override the "other" colour when the link is hovered.

ul > li > a {
  color: #000;
  border-bottom: solid 2px transparent;
}
ul > li > a:hover {
  color: orange;
  border-color: orange;
}

ul:hover a {
  color: red;
}

<ul>
    <li>
        <a>lorem</a>
    </li>
    <li>
        <a>ipsum</a>
    </li>
    <li>
        <a>sit</a>
    </li>
    <li>
        <a>amet</a>
    </li>
</ul>

How to show all siblings on :hover in pure CSS

Your problem is the selector:

.menu li:hover ~ .menu li

A hidden element can't be hovered-over, which means that li:hover is never going to match an element. Also, the general-sibling combinator is trying to find (subsequent) siblings that are <li> elements descending from sibling .menu elements. Which matches no elements in the page.

Converting that to the following selector:

.menu:hover li ~ li

.menu {  margin: 0;  padding: 0;  list-style: none;  overflow: hidden;  ;  background-color: #777;}.menu li {  float: none;  display: none;}.menu li a {  display: block;  padding: 10px 20px 10px 20px;  text-decoration: none;  color: #bbb;}.menu li a:hover {  color: #fff;}.menu .btn {  display: block;  cursor: pointer;}.menu:hover li ~ li {  display: block;}

<!--NEED SOLUTION WITHOUT ALTERING HTML --><ul class="menu">  <li class="btn"><a>☰</a>  </li>  <li><a href="/">Home</a>  </li>  <li><a href="/portfolio">Portfolio</a>  </li>  <li><a href="/contact">Contact</a>
    <ul class="sub-menu">      <li><a href="/">Sub Menu</a>      </li>      <li><a href="/portfolio">Sub Menu</a>      </li>    </ul>
  </li></ul><!--NEED SOLUTION WITHOUT ALTERING HTML -->

Change Color of Sibling Elements on Hover Using Css