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

Customize Cell Styling with Bootstrap Full Calendar CSS

I am attempting to implement a Bootstrap calendar feature where cells are colored green if the timestamp is greater than today's date. This can be achieved by: $checkTime > $today cell.css = green background I came across this code snippet on St ...

javascripthtmlcsstwitter-bootstrap

Tips for assigning an ID to a span element within a for loop

I am facing a challenge where I need to assign IDs to span tags that do not have the id attribute. These IDs need to be assigned sequentially by incrementing through a for loop and passing my geneologicalSequenceNumber into each span tag. Can you guide me ...

javascripthtmljquery

Steps to create a "reset fields" option for specific input fields

Is there a way to create a link that clears the input fields in a specific column? I have managed to style a button to look like a link: <input type="reset" value="clear fields" style=" background:transparent; border: none; color:blue; cursor:pointer"& ...

htmlcss

Issue with D3: Events not triggering transitions

I am currently working on creating a bar chart using D3 in Angular4. // Enter Phase this.chart.selectAll('.bar') .data(this.barData) .enter() .append('rect') .attr('class', 'bar'); // Update Phase let bars ...

javascriptjquerycssangulard3.js

Combining SVG icons into a sprite sheet and referencing them using the elements <defs>, <g>, and <use> to optimize

I am attempting to incorporate an SVG icon within my HTML code for future use, but I'm facing issues with its display on the webpage when referenced using the <use> tag. Initially, I copied the SVG code of the icon and inserted it directly into ...

htmlsvgsvg-sprite

Is there a way I can obtain the code for a message box?

When I refer to a message box, I am talking about a container that gives users the ability to input their text and access different features like BOLD, ITALIC, color, justify, etc., in order to customize their message's appearance! (Think of it as the ...

javascriptphphtml

Troubleshooting: Why isn't External CSS Functioning Properly in Broadleaf

I have encountered a question regarding the use of a custom email template in broadleaf. It seems that I am unable to apply an external CSS file and can only use inline styles. Is this normal behavior, or am I missing something? Below is how I am attempti ...

cssspringbroadleaf-commerce

Is it possible to maintain tab focus instead of visual focus when navigating past the skip navigation menu for improved accessibility?

My website features an accessibility skip navigation menu that utilizes named anchors to navigate to different content areas. These content areas, including the top menu, left menu, main body content, and footer menus, contain links within them. When I u ...

jqueryhtmlcssaccessibility

What could be causing my inline-block divs to not line up correctly?

Presented below is the code snippet of my HTML: .classWrap { text-align: center; } .classInd { display: inline-block; height: 200px; width: 200px; margin: 20px; border: 2px solid #FFF202; border-radius: 10%; box-shadow: 0 0 15px 0 #FFF2 ...

htmlcss

Delete Bootstrap icon ::before

I'm currently working on dynamically adding Bootstrap icons and I want them to display on separate lines, but for some reason they're appearing on the same line as the text. Take a look at this image https://i.sstatic.net/GUZtl.png Here's ...

htmlcsstwitter-bootstrapbootstrap-4pseudo-element

Determine the overall cost based on varying percentage increases for each step

I am currently working on developing a price estimation calculator. Here is the breakdown: For 1000 MTU, the price will be 0.035, resulting in a total of 35. For 2000 MTU, the price will be 0.034, making the total 67. For 3000 MTU, the price will be 0.03 ...

javascripthtmljquerycss

Detecting unutilized space in a collection of divs with varying sizes using JavaScript and CSS

To better understand my issue, I created a StackBlitz demo: https://stackblitz.com/edit/angular-aqmahw?file=src/app/tiles-example.css Screenshot My tiles can have four different widths (25%, 50%, 75%, 100%). The tiles must fit on only two lines, so if a ...

javascriptcssangularalgorithm

What is the correct way to load a column of images without affecting the readability of the text alongside them? (see image below)

https://i.stack.imgur.com/rBL50.png Whenever my page loads, there is a card with a vertical list of images. Due to the loading time of the images, the text appears first and gets squished as shown in the provided screenshot. Is there a way for the text to ...

phphtmlcss

Does using .stopImmediatePropagation() in the click event of a menu item have any impact on analytical tools?

Scenario I've implemented a navigation menu that loads subpages into a div using AJAX. While everything seems to be working fine, I noticed a bug where if I navigate to a subpage, then return to the main page and revisit the same subpage, it gets loa ...

jqueryhtmlajaxgoogle-analytics

The callback function in AngularJS filters

I'm currently using an AngularJS filter to sort through a list of items. Here is the Jade markup I am using: li(ng-repeat="parcel in parcels | filter : filterActiveAreaParcels") After the filter function runs and the elements are displayed in the DO ...

javascriptjqueryhtmldomangularjs

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

Comparing CSS rules: the faster option between specifying multiple IDs or not

Recently, I have been heavily involved in working with Concrete5. It has come to my attention that the default theme contains numerous CSS rules that are defined in this manner: #page #central #sidebar p{line-height:24px} Considering that "sidebar" is an ...

cssperformancedomcss-selectors

Enhancing the appearance of unvisited links with background styles

I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...

css

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

javascriptjqueryhtmlcheckbox

Series of responses cascading from one another

Users are experiencing an issue where the need for adjusting margins based on the depth of responses in posts. Currently, this involves setting a margin-left value of 40px for one level deep reactions and 80px for two levels deep, and so on. To address th ...

htmlcsswidthmargincenter