Struggles with CSS hover effects on text and buttons

Beginner in the world of HTML & CSS

Struggling with the following:

  1. Hover Effect: Looking to implement a hover effect where hovering over either the staff name text or the circle button above it triggers the appearance of a square border (refer to 'After selection' image) and makes the label text (staff name) bold. Currently, the text only becomes bold when hovering over the text itself and not when hovering over the circle button.
  2. After Selecting: Once people have been selected, I want the opacity of unselected individuals to be reduced to a lighter color to make them less prominent. Additionally, users should be able to toggle between selecting and deselecting individuals by clicking them. If a person has already been selected, another click on them should remove their selection. Users should have the freedom to select as many people as they desire.

Feel free to offer additional tips as I am new to this and still learning. Thank you!

See After Selection Image

HTML Code

**CSS Styling** 
/* Custom Staff Filter Styles */

.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;
}

... (additional CSS code)

<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>
                                ... (more HTML markup)
    <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>
      ... (more HTML markup)
    </div>
  </div>
</div>

htmlcss

Answer №1

The key issue here is the class to which you are attaching the hover state. Currently, it is applied to 

.staff_btn-group .langDescription:hover
, but it should be on the button group itself like this: 
.staff_btn-group .langDescription:hover
.

As for the second part, implementing Javascript might be necessary to handle selection and opacity changes effectively. The complexity of this task extends beyond a simple answer as there are numerous variables that can influence the solution.

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Positioning SVGs within a parent container while maintaining responsiveness

How can I anchor an SVG overlay with a circle in the bottom right corner while expanding the rest of the SVG to fill the remaining area of the container without distorting the circle? I've been able to position the SVG in the bottom right corner, but ...

htmlcsssvgresponsive

Troubleshooting problems with scrolling on JavaScript in Edge, Opera, and Chrome

Currently, I am developing a fun CSGO-inspired box opening feature on my food recipe website that randomly selects recipes for users. However, I have encountered some challenges with the scrolling functionality. It seems to be incompatible with certain bro ...

javascripthtmlcss

What is the best way to choose a random number using jQuery?

<div class="yyy"></div> <p>...</p> <pre><code>let content = $(".xxx").text(); $(".yyy").html(content); http://jsfiddle.net/tQeCv/ I just require this specific input : Number is {1|2|3|4}, and {one|two|three|four} ...

javascriptjqueryhtmlarraysjson

Conceal mobile button

Welcome to my website: Is there a way to hide the button on mobile phones? I want to create different buttons specifically for mobile devices. Below is the HTML code for the buttons. HTML <a href="http://site9171756.91.webydo.com/Info.html" target="p ...

htmlcssmobilehideinformation-hiding

After fetching an HTML snippet using the $.get() method, Font Awesome icons are no longer visible

Experimenting with creating a seamless 'single-page' experience, I've managed to achieve this by implementing an event listener in jQuery for menu link clicks. This triggers the replacement of the existing content in my main div with an HTML ...

jqueryhtmlcssfont-awesome

Generate a link that can easily be shared after the content has loaded using

One feature on my website involves a content container that displays different information based on which list item is clicked (such as news, videos, blogs, etc.). This functionality is achieved by using jQuery's load method to bring in html snippets ...

javascriptphpjqueryhtmlajax

Ensure the webpage is set to have a minimum width of 1024 pixels

Is it possible to make a webpage that utilizes bootstrap, Angular 2x, and Scss stop being responsive once the screen width reaches 1024px? I would like the layout to stay fixed at this size and enable horizontal scrolling for users who resize their browser ...

htmlcsssass

CSS with a "true" space for a fixed element (ensuring the previous element does not overlap with the current fixed element)

I am facing an issue with the layout of my webpage. I have two horizontal columns - the left one is fixed, along with a bottom footer that is below the second content column. When I add a border to the content column, it extends all the way down to the fo ...

cssfixedspaceoverlap

Emails cannot display CSS styles

I'm experiencing a problem with my email messages not reading the CSS styles, regardless of whether I use inline CSS or not. I have tried everything but still can't figure out the issue. Can anyone assist me? $firstname = $row['firstname&ap ...

phphtmlcssemail

The sticky element should only be active when the visible section is overflowing vertically. There should be no scrollbar if the height is minimal

I'm currently working on a Whatsapp-style navigation bar and facing an issue with the sticky navbar functionality. https://i.stack.imgur.com/Cy3lA.gif Please refer to the details below for more information. To resolve this issue, I have included ...

javascripthtmlcss

Utilizing AngularJS to handle the reception and storage of HTML entities

I am having an issue storing and displaying HTML content (using an HTML editor) in my AngularJS WebApp. The problem is that the code appears as plain text. Here is the JSApp code: $scope.SkipValidation = function (value) { var decoded = $("#showtext" ...

phphtmlangularjs

Leveraging python's BeautifulSoup library, one can easily implement HTML selection

Recently, I've started diving into Automate the Boring Stuff and exploring how to create my own programs. Currently, I'm experimenting with beautiful soup's 'select' method in order to extract the value '33' from this cod ...

pythonhtmlcssbeautifulsoup

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries

Embracing Divs Similar to the Grid Selector in Windows Phone

Can someone help me create square divs in HTML 5, similar to the example shown? I have written this HTML5 Code - what should I include in the CSS file to achieve the desired outcome? (If Bootstrap can be used, please provide the necessary classes instead ...

csshtml

What is the best way to update the div id by extracting the last digits from a number?

Is there a way to change the div ids using a function? Before: <div id="a_1">a1</div> <div id="b_1">b1</div> <div id="c_1">c1</div> <div id="d_1">d1</div> <button onclick="change()">Change</button& ...

javascriptjqueryhtml

A guide on incorporating a set of components to be utilized as custom HTML elements in Angular

I am in the process of revamping my application to be more modular on the UI side, with a focus on separating different elements including: App header Left navigation panel Main content on the right side of the nav panel I have successfully figured out ...

htmlangulartypescript

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

What could be causing the div to be wider than the content inside of it?

I am having an issue creating a webpage with a 20-60-20 flex fill layout. The div in the center, which should occupy 60% of the page, is wider than its content, causing it to appear off-center. https://i.stack.imgur.com/WwCJy.png Here is my home.componen ...

htmlcssangularangular-flex-layout

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

iphonehtmlcssmedia-queries

Highlight react-bootstrap NavItems with a underline on scroll in React

I am currently working on a website where I have implemented a react-bootstrap navbar with several Nav items. My goal is to enable smooth scrolling through the page, where each section corresponds to an underlined NavItem in the navbar or when clicked, aut ...

javascriptcssreactjsreact-bootstrap