2

I have several sibling divs lined up like THIS:

div {
    text-align: center;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}
div:hover {
    background-color: #b5b5b5;
}
 
/*color changes*/
.a:hover ~ .b {
   background-color: #E6E600;
}
.b:hover + .a {
    background-color: #ccffcc;
}
<div class="a">Box A
</div>
<div>another box
</div>
<div>another box
</div>
<div>another box
</div>
<div class="b">Box B
</div>

Is there a way to make it so that when I hover over box b, box a's attributes change?

EDIT: I want to change "a"'s background color

atmd
  • 7,430
  • 2
  • 33
  • 64
GeekOnGirl
  • 41
  • 7

2 Answers2

2

You can achieve this with jQuery:

$(document).ready(function() {
  $(".b").hover(
    function() {
      $(".a").addClass("c");
    }, function() {
      $(".a").removeClass("c");
    });
});
.c {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="a">Box A</div>
<div>another box</div>
<div>another box</div>
<div>another box</div>
<div class="b">Box B</div>

Example here

Stickers
  • 75,527
  • 23
  • 147
  • 186
Ash
  • 2,108
  • 2
  • 17
  • 22
2

here is an interesting way to do it

.rating {
  unicode-bidi: bidi-override;
  direction: rtl;
  text-align: center;
}
.rating > span {
  display: inline-block;
  position: relative;
  width: 1.1em;
}
.rating > span:hover,
.rating > span:hover ~ span {
  color: transparent;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
   content: "\2605";
   position: absolute;
   left: 0;
   color: gold;
}


<div class="rating">
            <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
        </div>

example : https://css-tricks.com/examples/StarRating/

dimshik
  • 1,251
  • 15
  • 17