The functionality of hover does not apply when connected to a class or id

I'm facing a challenge with a div that I want to react to hover, but it's connected to both a class and an id.

#levelbox1 {
  left: 150px;
  position: absolute;
  background-color: rgb(0, 228, 0);
  border-radius: 15px;
  box-shadow: 1px 1px 4px, inset 0 0 10px rgb(255, 255, 255);
  width: 250px; 
  height: 390px;
  z-index: -5;
}

.levelbox {
  position: relative;
  z-index: 20;
}

.levelbox:hover, .levelbox:active {
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  width: 105%;
  height: 105%;
}
<div id="thirdbody">
            <div class="levelbox" id="levelbox1">
                <center>
                <h1 class="levelboxheader">
                    Beginner
                </h1>
                <p class="levelboxtext">
                    Features: <br>
                    - Aiming <br> 
                    - Cps <br> 
                    - W-tapping <br> 
                    - Blockhitting <br> 
                    - Basic explanations
                </p>
                </center>
            </div>

Removing the id in the css resolves the issue, but finding a solution that accommodates both has been challenging. I've attempted changing the :hover state to match the id of the div, but it hasn't made much difference.

htmlcssclasshover

Answer №1

It appears that your CSS specificity is causing the hover and active rules to be overridden. To fix this issue, you need to increase the specificity of those rules so they take precedence:

#levelbox1 {
  left: 150px;
  position: absolute;
  background-color: rgb(0, 228, 0);
  border-radius: 15px;
  box-shadow: 1px 1px 4px, inset 0 0 10px rgb(255, 255, 255);
  width: 250px;
  height: 390px;
  z-index: -5;
}

.levelbox {
  position: relative;
  z-index: 20;
}

#thirdbody .levelbox:hover,
#thirdbody .levelbox:active {
  box-shadow: inset 0 0 5px rgb(255, 255, 255);
  width: 105%;
  height: 105%;
}
<div id="thirdbody">
  <div class="levelbox" id="levelbox1">
    <center>
      <h1 class="levelboxheader">
        Beginner
      </h1>
      <p class="levelboxtext">
        Features: <br> - Aiming <br> - Cps <br> - W-tapping <br> - Blockhitting <br> - Basic explanations
      </p>
    </center>
  </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

Create a Div that smoothly transitions in and out, periodically appearing and disappearing

Can anyone assist me in implementing a feature where a message (div) displays on my website for two minutes every 15 minutes? Any advice or script would be greatly appreciated. Thank you in advance! ...

javascripthtmlcss

Having trouble disabling an HTML select menu using JQuery?

My HTML page includes multiple select menus that all have the shared class name .iconDropDownMenu. During generation with PHP, some of these select menus may be hidden by PHP adding an additional class. I attempted to disable only the hidden .iconDropDown ...

javascriptjqueryhtmljquery-ui-selectmenu

Omit a certain td element from the querySelectorAll results

Greetings! I am currently working with an HTML table and I need to figure out how to exclude a specific td element from it, but I'm not sure how to go about it. Here's the HTML code: <table id="datatable-responsive" c ...

javascripthtmljavascript-objects

Is it possible to modify HTML style using JavaScript by selecting the class name without using jQuery?

I've been experimenting with some code and noticed that when I use the element ID, it works fine, but when I try to use the class name, it doesn't work... <!DOCTYPE html> <html> <body> <p id="p1" class="theClass">Hello ...

javascripthtmlcssclass

endless cycle of scrolling for div tags

My goal is to incorporate a tweet scroller on I believe it uses the tweet-scroller from Unfortunately, this link seems broken as the demo is not functioning. I searched for an alternative solution and came across http://jsfiddle.net/doktormolle/4c5tt/ ...

javascriptjquerycssjquery-plugins

JavaScript validation for basic "select" isn't functioning as expected

I need assistance with my simple "select" validation using JavaScript. The issue I am facing is that when validating the "select" element, it does not display the select options to users after a validation error occurs. "The select option is not re-enabl ...

javascripthtmlvalidation

Slow CSS :hover animations in the most recent release of Chrome

I recently upgraded my browser from chromium version 67 to the latest Chrome version 79. However, I noticed that after the upgrade, the CSS transitions on my website have become very laggy and unresponsive. Surprisingly, everything works perfectly fine on ...

javascriptjqueryhtmlcssgoogle-chrome

What's the most effective method for setting up this header using the flex grid system?

I have been able to arrange the logo, search bar, and text in different columns, but I'm struggling to figure out how to position the <nav> below the search bar while maintaining the height consistency with the logo. #outer {} #logo { ...

htmlcssflexboxbootstrap-4

What is the proper way to utilize the JavaScript String.replace() function?

Below is the HTML code snippet containing placeholder text: <p style="padding: 3%; border:1px solid black" id="myspan" ng-model="myspan" ng-mouseup="showSelectedText()"> And so our resident genius, our Dr. Jekyll, explosively completed his trans ...

javascriptjqueryhtmlangularjs

Creating responsive images in Bootstrap columns

I've found a solution to my issue with large images, but I am still struggling with smaller images not fitting well into larger spaces. Essentially, I created a CMS for a user who required templates with various bootstrap columns as content areas. Cu ...

htmlcssbootstrap-4responsive

How can a JSON string be assigned to a variable for use in a Google pie chart?

I am currently experiencing an issue with my web server. I am sending a JSON object as an argument via render_template to my website, where I intend to use this data to display a Google pie chart. The problem arises when I try to assign the Google pie cha ...

javascripthtmljsongoogle-visualization

Expand the div to fit 100% width inside the Blueprint container

I am currently working on a website and considering using the Blueprint CSS framework. You can view the site I'm referencing here: http://jsfiddle.net/timkl/uaSe3/ The Blueprint framework allows for a nice 24 column grid layout. One challenge I&apos ...

cssblueprint-css

Attempting to transfer a list of search findings from Django to JavaScript

I've been working on passing an array of MySQL query results from Django to JavaScript, but I encountered an issue where the page source displays an array of strings instead of the desired query results. Below is my Django code snippet: resultFEs = [ ...

javascriptjqueryhtmldjango

The image next to the words

Hey there, I'm looking to add a photo next to some text on my page using flexbox. I was able to achieve something similar but I'm open to other suggestions. Check out what I have so far here and here's the desired look: It should look like ...

htmlcss

Is there a way to prevent the content in the <p> tag from wrapping and hiding its overflow?

Is there a way to use tailwindcss to ensure that the first <p> child truncates or hides overflow as its container shrinks? I've tried using classes like whitespace-nowrap and overflow-hidden, but the text always wraps regardless. Any suggestions ...

cssreactjsflexboxtailwind-css

Is there a way to dynamically include an attribute using VueJS?

Is there a way in Vue to dynamically add an attribute, not just the value of an attribute using v-bind? I am aware that I can set a value to an attribute dynamically with v-bind, but I would like to add the attribute itself based on a condition. Something ...

javascripthtmlvue.js

I am attempting to restrict a text box so that it can only accommodate 4 digits

I have successfully implemented a restriction on a text box to allow only a maximum of 4 digits, along with an alert message if the length is less than 4. The code I used is as follows: <tr> <td id="ExamNumber">ExamNumber </td> ...

javascripthtml

Designing a dynamic left navigation column with collapsible features

I'm currently exploring ways to integrate this style of sidebar navigation with the layout from my JSfiddle. In the first example, the sidebar collapses to the main icons, but the use of the Nav tag is causing it to slide under the content instead of ...

jquerycsstwitter-bootstrapmenu

Switching the image backdrop with an assortment of pictures

I am working with a structure that looks like this: <div class="container"> <ul> <li> <img> </li> </ul> </div> Currently, there is a background image set for the main container. My go ...

javascripthtmlcss

jQuery text slideshow not working properly when a <br> tag is present

I'm looking to develop a basic text slideshow that smoothly transitions between phrases and loops continuously. However, I've run into an issue where the slideshow malfunctions when I add a line break in the text. It only seems to work properly w ...

javascriptjqueryhtmlcssslideshow