Ensuring a button (class) is in active hover mode when the document loads

My website features 4 clickable service buttons on the homepage, each with a unique hover effect (background-color change) when users interact with them. While this setup works well overall, I am looking to highlight the FIRST button as the most important service by making it appear "active" with the hover effect (background color) when users first visit the page. If they hover over any of the other buttons, the first button should return to its standard background color.

To achieve this, I initially used the nth:first-child selector in CSS to give the first button its highlighted color. However, this solution had a drawback - the button did not revert back to its original color when users hovered over other buttons.

I am now considering using jQuery to address this issue. Although it may not be the cleanest solution, it gets the job done for now. I wonder if there is a better way to handle this scenario without resorting to jQuery?

https://i.sstatic.net/bonzw.jpg


UPDATE: With some jQuery tweaks, I managed to make it work. While my current solution functions adequately, I can't help but think that there might be a more efficient method to achieve the desired outcome. Any suggestions for improvement are welcome!

jQuery(document).ready(function($){

// Add hover class to first button
$('.service-button.totalentreprise').addClass('bg-orange');

$('.service-button').hover(
  function() {
    // Remove hover class from first button
    $('.service-button.totalentreprise').removeClass('bg-orange');
    // Add hover class to any button
    $( this ).addClass('bg-orange');
  }, function() {
    $( this ).removeClass('bg-orange');
  }
);

});

Answer №1

give these a shot


window.addEventListener('load', function(){

        $(".service-button").hover(function(e) { 
            $(this).css("background-color",e.type === "mouseenter"?"#F7AA06":"transparent") 
        });
})

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

SCSS: When hovering over one div, display a different div

My goal is to display the elements in another div when hovering over a specific div. However, my current code does not seem to be working as expected. At the moment, there is no response upon hover and it remains non-responsive. I would greatly appreciate ...

How to show a placeholder in a select input using ReactJS

I'm currently trying to incorporate placeholder text into a select input field using ReactJS, but it doesn't seem to be working as intended. Here is the code snippet I am working with: <Input type="select" placeholder="placeholder"> ...

Utilize formData to upload an image to a database with ajax

I'm struggling with the process of uploading an image from an HTML form. The goal is for the form to send the image name along with other data to a PHP page. Instead of using the serialized function, I opted for formData as it has the capability to h ...

Using VBA and Selenium to access iframes within HTML with the #document tag

I am currently facing a challenge in accessing the HTML content within two iframes using Selenium Basic in VBA. Due to restrictions on our machines, we are unable to use IE and other tools like Python are not available to us. In the past, I was able to ac ...

"Can you explain the process by which React grabs the props using the code `const props = this.props

I recently came across an interesting article authored by Dan. The example provided in the article caught my attention: class ProfilePage extends React.Component { showMessage = (user) => { alert('Followed ' + user); }; handleClick ...

A contact form overlaying a muted Google Maps view in an HTML website

Currently, I am in the process of developing a website that features a contact form. It would be great if I could incorporate Google Maps as a background, but with a greyed-out effect instead of a plain white page. After trying out a few solutions, I ende ...

What is the best way to invoke a function in Typescript while retrieving data?

Is it possible to run a query in my main.ts file with another ts file and then pull the result of the query into another file? If so, how can this be achieved? Here is an example from my main.ts file: async function getAllTips() { const tips: any = []; ...

Trouble with Material-UI Textfield Hinttext Functionality

When designing a textfield according to job requirements, I encountered an issue. After assigning a background color to the TextField, the hintText disappeared. To resolve this, I had to manually set the z-index of the label. Now, the hintText is visible, ...

Save to a JSON file

Hey there, I'm having some trouble with pushing a temporary value to a JSON file using the command "MyJSON.name.push". It keeps giving me an error saying "Undefined is not an object". I've tried different approaches and using JavaScript arrays wo ...

Creating a responsive design using Bootstrap4

Today, I made the switch to bootstrap4 and enabled flexbox in _variables.scss. However, I'm still confused about the flexbox capabilities of bootstrap4. Some questions I have include: How can I utilize flex-direction:column? Is it possible to creat ...

Retrieve HTML content from a JSON object and render it on a web page

I am facing a challenge with decoding html that is in json format. I'm struggling to figure out how to retrieve my html and display it on a page. It seems like json_decode isn't the solution. Can anyone help me with this issue? Appreciate any as ...

Is it possible to stop the manipulation of HTML and CSS elements on a webpage using tools similar to Firebug?

How can we prevent unauthorized editing of HTML and CSS content on a webpage using tools like Firebug? I have noticed that some users are altering values in hidden fields and manipulating content within div or span tags to their advantage. They seem to be ...

Element Style Does Not Align with Computed Z-Index

Currently, I am in the process of developing an HTML5 video player. However, I have encountered a problem where my custom controls become unclickable once the video element is set to fullscreen mode. This issue arises because the video's z-index is se ...

The directive for accepting only numbers is not functioning in versions of Chrome 49.xx.xx and earlier

I have implemented a directive in Angular 6 to allow only numbers as input for certain fields. The directive code is shown below: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[NumbersOnly]& ...

Steps to Create a Repeating Melody/Instructions for Implementing a Loop Function

Currently, I am working with discord.js and have had success implementing various commands. However, I am having trouble creating a loop command for my discord bot. This specific command should play a song repeatedly until the loop command is executed ag ...

How can the Jquery UI Datepicker value be automatically set upon redirecting to this page?

When I submit a form and an error occurs, the value selected in the datepicker is not retained. The datepicker field remains empty. How is this possible? <html> <head> <script type="text/javascript" >. $(function() { ...

mandatory data fields for an HTML form

I'm having some trouble creating an HTML form with mandatory input fields. The code I have so far is shown below: <div class="col-sm-6"> <label for="city" class="form-control">City ...

Transfer a specific row from a dataTable to another dataTable on a separate php page

Within my programming project, I am working with two tables: table1.php and table2.php In my current setup, I have a script located in table1.php that allows me to pass data to a modal which then passes the data into table2.php. However, I am now facing a ...

The Server-Side Rendered page is experiencing inconsistencies in rendering

I am currently working on a straightforward NextJS project with just one page. The application is configured to utilize redux, next-redux-wrapper, and redux thunk. It is important that the page always undergo server-side rendering. Here is an example of h ...

Both Fluid and Fixed layouts offer different advantages and disadvantages for website

Is there a way to position two divs side by side, where one div is 75% width and the other is 25% width? Additionally, can we place another div on top with margin:0 auto; to center the content of the page with a width of 986px? Here is an example code sni ...