CSS hover problems with text and button

Question

New to HTML & CSS

I'm having trouble doing the following:

1. Hover: When I hover over the text (staff name) or the circle button above the name I need a square border to appear (see 'After selection' image) and I need the label text (staff name) to appear bold -while hovering over it. Currently the Text only appears bold when I hover over the text, not when I hover over the circle button.
2. After Selection: After I have selected the people, I want the unselected peoples opacity to be reduced to a fainter/lighter color so they don't stand out as much. I also want to be able to select or unselect people through clicking. I.e if they've already been selected another click on them would unselect them. User should be able to select as many people as they like.

Feel free to throw in extra tips etc as I'm new to this and still learning. Thanks!

After Selection

HTML

**CSS** ```
/* Staff Filter */

.staff_filter {
  float: left;
  display: block;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(222, 222, 222);
  width: 200px;
}

.staff_btn-group .langDescription:hover {
  color: #111;
  font-weight: bold;
}

.staff_btn-group .langButton:hover {
  box-shadow: 0px 0px 15px rgb(142, 204, 255);
}

.staff_btn-group:hover {
  border: 1px solid black;
}

.staff_btn-group button:focus {
  border: 1px solid black;
}

.staff_btn-group button:active {
  border: 1px solid black;
}


/* Sidebar Filter Title edits */

.filter_title {
  text-decoration: underline;
  font-size: 15px;
}

.staff_filter:hover {
  cursor: pointer;
}


/* STAFF FILTER */

.btn_group_c1,
.btn_group_c2,
.btn_group_c3,
.btn_group_c4 {
  font-size: 9px;
}

.brad_button_grouping,
.wayne_button_grouping,
.gary_button_grouping,
.pooja_button_grouping,
.bill_button_grouping,
.raj_button_grouping,
.broni_button_grouping,
.milti_button_grouping,
.oliver_button_grouping,
.paul_button_grouping,
.goran_button_grouping,
.yani_button_grouping {
  display: inline-block;
  text-align: center;
  padding: 2%;
}

.langDescription {
  display: block;
  font-size: small;
  color: grey;
}

.staffButton {
  width: 40px;
  height: 40px;
  border-radius: 60%;
  cursor: pointer;
  outline: blue;
}


/* Staff buttons */

button#brad_btn_filter\,
button#wayne_btn_filter\,
button#gary_btn_filter\,
button#pooja_btn_filter\,
button#yani_btn_filter\,
button#goran_btn_filter\,
button#broni_btn_filter\,
button#raj_btn_filter\,
button#bill_btn_filter\,
button#oliver_btn_filter\,
button#paul_btn_filter\,
button#milti_btn_filter\,
{
  width: 40px;
  height: 40px;
  border-radius: 60%;
  cursor: pointer;
  outline: none;
  background-color: white;
  outline: black;
  border-width: thin;
}

.staff_btn-group.staffButton:hover {
  font-weight: bold;
}

<div class="staff_filter ">
  <h6 class="filter_title">Our Team</h6>
  <div class="btn_group_c1 ">
    <li class="staff_btn-group brad_button_grouping ">
      <label> <button class="btn-group staffButton" id="brad_btn_filter " type="button"></button>
                                <label class="langDescription" for="brad_btn_filter  ">Brad</label></label>
    </li>
    <div class="staff_btn-group wayne_button_grouping ">
      <button class="btn-group staffButton " id="wayne_btn_filter " type="button "></button>
      <label class="langDescription " for="wayne_btn_filter ">Wayne</label>
    </div>
    <div class="staff_btn-group gary_button_grouping ">
      <button class="btn-group staffButton " id="gary_btn_filter " type="button "></button>
      <label class="langDescription " for="gary_btn_filter ">Gary</label>
    </div>
  </div>
  <div class="btn_group_c2 ">
    <div class="staff_btn-group pooja_button_grouping ">
      <button class="btn-group staffButton " id="pooja_btn_filter " type="button "></button>
      <label class="langDescription " for="pooja_btn_filter ">Pooja</label>
    </div>
    <div class="staff_btn-group yani_button_grouping ">
      <button class="btn-group staffButton " id="yani_btn_filter " type="button "></button>
      <label class="langDescription " for="yani_btn_filter ">Yani</label>
    </div>
    <div class="staff_btn-group goran_button_grouping ">
      <button class="btn-group staffButton " id="goran_btn_filter " type="button "></button>
      <label class="langDescription " for="goran_btn_filter ">Goran</label>
    </div>
  </div>
  <div class="btn_group_c3 ">
    <div class="staff_btn-group broni_button_grouping ">
      <button class="btn-group staffButton " id="broni_btn_filter " type="button "></button>
      <label class="langDescription " for="broni_btn_filter ">Broni</label>
    </div>
    <div class="staff_btn-group raj_button_grouping ">
      <button class="btn-group staffButton " id="raj_btn_filter " type="button "></button>
      <label class="langDescription " for="raj_btn_filter">Raj</label>
    </div>
    <div class="staff_btn-group bill_button_grouping ">
      <button class="btn-group staffButton " id="bill_btn_filter " type="button "></button>
      <label class="langDescription " for="bill_btn_filter ">Bill</label>
    </div>
  </div>
  <div class="btn_group_c4 ">
    <div class="staff_btn-group oliver_button_grouping ">
      <button class="btn-group staffButton " id="oliver_btn_filter " type="button "></button>
      <label class="langDescription " for="oliver_btn_filter ">Oliver</label>
    </div>
    <div class="staff_btn-group paul_button_grouping ">
      <button class="btn-group staffButton " id="paul_btn_filter " type="button "></button>
      <label class="langDescription " for="paul_btn_filter  ">Paul</label>
    </div>
    <div class="staff_btn-group milti_button_grouping ">
      <button class="btn-group staffButton " id="milti_btn_filter " type="button "></button>
      <label class="langDescription " id="milti_btn_filter ">Milti</label>
    </div>
  </div>
</div>

Answer 1

The first part is to do with which class you attach the hover state to, you had it on the .staff_btn-group .langDescription:hover but you need it on the button group like so .staff_btn-group .langDescription:hover.

For the second part you will likely need some javascript to have a way of storing what's selected and what's not in order to correctly change the opacity of the unselected elements. It beyond the scope of a single question really, there are way to many variables that will impact the solution to this.

.staff_filter {
  float: left;
  display: block;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgb(222, 222, 222);
  width: 200px;
}

.btn_group_c1, .btn_group_c2, .btn_group_c3, .btn_group_c4 {
  list-style: none;
  padding: 0;
  margin: 10px 0;
}

.staff_btn-group:hover .langDescription {
  color: #111;
  font-weight: bold;
}

.staff_btn-group:hover .langButton {
  box-shadow: 0px 0px 15px rgb(142, 204, 255);
}

.staff_btn-group:hover {
  border: 1px solid black;
}

.staff_btn-group button:focus {
  border: 1px solid black;
}

.staff_btn-group button:active {
  border: 1px solid black;
  opacity: 0.6;
}

<div class="staff_filter ">
                        <h6 class="filter_title">Our Team</h6>
                        <ul class="btn_group_c1 ">
                            <li class="staff_btn-group brad_button_grouping ">
                                <button class="btn-group staffButton" id="brad_btn_filter " type="button"></button>
                                <label class="langDescription" for="brad_btn_filter  ">Brad</label>
                            </li>
                            <li class="staff_btn-group wayne_button_grouping ">
                                <button class="btn-group staffButton " id="wayne_btn_filter " type="button "></button>
                                <label class="langDescription " for="wayne_btn_filter ">Wayne</label>
                            </li>
                            <li class="staff_btn-group gary_button_grouping ">
                                <button class="btn-group staffButton " id="gary_btn_filter " type="button "></button>
                                <label class="langDescription " for="gary_btn_filter ">Gary</label>
                            </li>
                        </ul>
                        <ul class="btn_group_c2 ">
                            <li class="staff_btn-group pooja_button_grouping ">
                                <button class="btn-group staffButton " id="pooja_btn_filter " type="button "></button>
                                <label class="langDescription " for="pooja_btn_filter ">Pooja</label>
                            </li>
                            <li class="staff_btn-group yani_button_grouping ">
                                <button class="btn-group staffButton " id="yani_btn_filter " type="button "></button>
                                <label class="langDescription " for="yani_btn_filter ">Yani</label>
                            </li>
                            <li class="staff_btn-group goran_button_grouping ">
                                <button class="btn-group staffButton " id="goran_btn_filter " type="button "></button>
                                <label class="langDescription " for="goran_btn_filter ">Goran</label>
                            </li>
                        </ul>
                        <ul class="btn_group_c3 ">
                            <li class="staff_btn-group broni_button_grouping ">
                                <button class="btn-group staffButton " id="broni_btn_filter " type="button "></button>
                                <label class="langDescription " for="broni_btn_filter ">Broni</label>
                            </li>
                            <li class="staff_btn-group raj_button_grouping ">
                                <button class="btn-group staffButton " id="raj_btn_filter " type="button "></button>
                                <label class="langDescription " for="raj_btn_filter">Raj</label>
                            </li>
                            <li class="staff_btn-group bill_button_grouping ">
                                <button class="btn-group staffButton " id="bill_btn_filter " type="button "></button>
                                <label class="langDescription " for="bill_btn_filter ">Bill</label>
                            </li>
                        </ul>
                        <ul class="btn_group_c4 ">
                            <li class="staff_btn-group oliver_button_grouping ">
                                <button class="btn-group staffButton " id="oliver_btn_filter " type="button "></button>
                                <label class="langDescription " for="oliver_btn_filter ">Oliver</label>
                            </li>
                            <li class="staff_btn-group paul_button_grouping ">
                                <button class="btn-group staffButton " id="paul_btn_filter " type="button "></button>
                                <label class="langDescription " for="paul_btn_filter  ">Paul</label>
                            </li>
                            <li class="staff_btn-group milti_button_grouping ">
                                <button class="btn-group staffButton " id="milti_btn_filter " type="button "></button>
                                <label class="langDescription " id="milti_btn_filter ">Milti</label>
                            </li>
                        </ul>
                    </div>