-2

I need to change the button color and text color on hover on the parent div.

I am getting the output and on hover, I have to change the color.

enter image description here enter image description here

Would you help me out? 

.Set {
  background-color: #fff;
  padding: 35px;
  box-sizing: border-box;
  min-height: 450px;
  z-index: 2;
  position: relative;
  width: 300px;
  border: 1px solid #ccc;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
}

.btn_bg {
  background-color: #000;
  color: #fff;
}

.Set:hover {
  background-color: #000;
}
<div class="Set">
  <h2 class="textMe">adasdsad asdas d</h2>
  <div class="bigtextMe">
    <p>asdsa asdsd asd asd sd sd sd </p>
    <a href="" class="btn btn_bg">njkndkajnsdkja</a>
  </div>
questionbank
  • 440
  • 8
  • 25
  • @TemaniAfif, Yes, I checked that but my scenario is different. I am also changing the background color of the parent. – questionbank Mar 13 '19 at 09:33
  • Accepted answer changing the only one child I have more than one. – questionbank Mar 13 '19 at 09:35
  • so make it same for all elements you want to change on hover – Joe Koker Mar 13 '19 at 09:36
  • 1
    Try these lines of code in your CSS file `.Set:hover .textMe{ color: #fff; } .Set:hover .btn{ color: #000; background-color: #fff; } .Set:hover p{ color: #fff; }` – Usman Mar 13 '19 at 09:39
  • @Usman, Yes, It's working. after using your code – questionbank Mar 13 '19 at 09:41
  • the accepted answer and the other answer will not give you a *ready-to-copy-paste* code, you need to do a small effort to understand the different selector and try. I don't think it's something you can do in only 2min (if I consider your reply after me closing the question) – Temani Afif Mar 13 '19 at 10:08
  • @TemaniAfif, Before uploading the question I checked that link you shared. I was confused about the multiple hovers. I thought there is another way to handle the multiple hovers on the effect. – questionbank Mar 13 '19 at 10:28

1 Answers1

0

Access the a tag with the descendant operator

.Set:hover >.bigtextMe > .btn_bg{}


.Set {
  background-color: #fff;
  padding: 35px;
  box-sizing: border-box;
  min-height: 450px;
  z-index: 2;
  position: relative;
  width: 300px;
  border: 1px solid #ccc;
}

.btn {
  padding: 10px 30px;
  font-size: 16px;
}

.btn_bg {
  background-color: #000;
  color: #fff;
}

.Set:hover {
  background-color: #000;
  color:white
}
.Set:hover >.bigtextMe > .btn_bg{
  background-color: white;
  color:black
}
<div class="Set">
  <h2 class="textMe">adasdsad asdas d</h2>
  <div class="bigtextMe">
    <p>asdsa asdsd asd asd sd sd sd </p>
    <a href="" class="btn btn_bg">njkndkajnsdkja</a>
  </div>
ellipsis
  • 12,049
  • 2
  • 17
  • 33