When you hover over the text, the color will shift

I have created two boxes that are blue with white text and change to a different color scheme when hovered over. However, I am experiencing an issue where the text color reverts back to the original color when hovering below the text area of the box.

Here is a snippet of my code:


body {
  background: #DCDCDC
}

a {
  text-decoration: none;
}

#galaxy {
  width: 400px;
  height: 300px;
  background-color: rgba(37, 100, 165, 0.80);
  border: 1px solid rgba(37, 100, 165, 0.80);
  margin: 0 auto;
  margin-top: 100px;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

#galaxy:hover {
  background-repeat: no-repeat;
  background-color: #FFF;
}

#test {
  width: 400px;
  height: 300px;
  background-color: rgba(37, 100, 165, 0.80);
  border: 1px solid rgba(37, 100, 165, 0.80);
  margin: 0 auto;
  margin-top: 100px;
  color: white;
  font-size: 30px;
  border-radius: 10px;
}

#test:hover {
  background-repeat: no-repeat;
  background-color: #F00;
}

.button-title-text {
  text-align: center;
  color: #FFF;
  font-size: 16px;
  padding-top: 100px;
}

.button-title-text:hover {
  text-align: center;
  color: rgb(37, 100, 165);
  font-size: 16px;
  padding-top: 100px;
}

Galaxy

Test

Any assistance with this issue would be greatly appreciated. Thank you in advance.

Answer №1

Streamlined your code and resolved the issue.

The problem stemmed from having identical styles applied to both the #galaxy and #test boxes (except when hovered over). I introduced a new class called .box for both elements and consolidated the styles under this selector.

Your initial setup caused a glitch where the hover effect only worked when directly hovering over the text inside the box, not the box itself.

To address this, I removed the color: property from the .button-title-text element so that it could inherit the color of the parent .box.

I then incorporated a .box:hover rule to change the text color upon hovering over either box.

This modification should resolve the issue!

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

I am encountering an issue where the function send_mail is receiving multiple values for the argument fail_silently

https://i.sstatic.net/QUt2A.png My small program encountered an error when attempting to email information from a form. Here's the type of error I got: I'm writing a simple little program ... when I'm trying to email this info. from that fo ...

I wonder which Material Design repository is the source of this library

I am attempting to replicate the CSS style used in this particular Material Design-inspired web application: https://i.stack.imgur.com/utalx.png After exploring Materialize CSS and MUI, I have not been able to pinpoint the exact framework responsible for ...

Tips for maintaining the size of an object while resizing a window

My circles are designed to increase in width at regular intervals, and once they reach a certain scale, they disappear and start over. However, every time I resize the screen or zoom in and out, the circle gets distorted into an oval or stretched object. H ...

What is the best way to reveal or conceal a div element on mouseover with jQuery?

Currently, I have a table with the following structure. <table> <tr> <td id="divOne">div one</td> <td id="divOne">2222</td> </tr> <tr> <td id="divOne">d ...

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle function update() { coyote.applyForce(gravity); coyote.edges(); coyote.update(); cactus.update(); if (coyote.intersects(cactus)){ alert("colisio ...

I am experiencing issues with my JavaScript not functioning properly in conjunction with my HTML and CSS. I am uncertain about the root cause of the problem (The console is displaying an error message:

I am facing challenges in creating a content slider and encountering issues with its functionality. Specifically, when testing locally, I noticed that the current-slide fades out and back in upon clicking the arrows left or right, but the slide content is ...

Is it possible to use a while loop to draw and populate a table?

Despite my efforts, this method is not producing the desired outcome. $row2 = 0; while ($row = mysql_fetch_assoc($query)) { echo "<table border='1'>"; if($row2 == 0){ echo "<tr>"; } elseif($row2 < 5){ ...

Ensure that children elements are aligned to the bottom by setting the axis of the HTML

Elements positioned within a parent DIV typically flow from top to bottom. Even when using Javascript to add elements to the parent DIV, they maintain this top-to-bottom positioning. I am interested in achieving a bottom-to-top axis alignment within the pa ...

What is the best way to include a maximum height in my ScrollToBottom element?

I am currently attempting to limit the maximum height of my component as adding user messages causes it to expand and stretch the whole page. However, I have been unsuccessful in setting a maxHeight property for the component. I am utilizing ScrollToBottom ...

Using jQuery to show/hide linked CSS3 animations upon Mouseenter/Mouseleave events

Exploring the capabilities of animate.css and jQuery within a bootstrap environment has been quite interesting for me. However, I've encountered a major issue! I am attempting to trigger animations on mouseenter / mouseleave, which led me to create a ...

What is the best way to position the section and footer to the left side of the sidenav?

I am relatively new to the world of html and css, trying my hand at constructing html layouts. I have encountered a bit of trouble in aligning the footer and section to the left of the nav bar. No matter what percentage widths I use, they always end up ove ...

Element that hovers and floats

Just last week, I was working on coding a custom menu bar for my blog located at . However, when it came to adding social buttons, things went awry. It seemed like a float element issue! Despite my attempts to resolve it by adjusting widths and properties, ...

Is there a way to ensure that neighboring divs have the same height as the tallest div in a row?

In the product description column, the value spans two lines, causing the row to adjust its height accordingly. However, the issue arises when adjacent divs do not match this height, resulting in an incomplete border as shown in the image below. This probl ...

Challenge encountered while attempting to implement grid system in ionic framework

I'm completely new to the world of ionic framework, and I really need some assistance in completing this view. Please see the image reference https://i.stack.imgur.com/WOBFw.png I have made an attempt at it with the following code: <div class ...

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

jQuery Autocomplete - struggling to pinpoint the exact location where the width of the suggestions div is being defined

I have successfully implemented jQuery Autocomplete, but I am facing an issue with adjusting the width. Currently, it is set to 268px in Firebug, however, I would like it to be 520px. After checking the stylesheet, I couldn't locate where the width o ...

What is the best way to adjust a Checklist's width to match the width of its parent Dropdown in Dash Plotly?

At the moment, I am facing an issue with setting the width of a checklist from Dash Core Components to match the width of the dropdown menu it is placed in. Here's a glimpse of how it appears currently: https://i.sstatic.net/mjzAd.png Below is the P ...

Which specific transitionend (or animationend) event should I use for this application?

I'm feeling a bit lost when it comes to using transitionend (or if I should be using animationend in this scenario). I'm not sure whether to utilize var, node, or box. Essentially, I am a complete beginner in this case. My goal is to have my div ...

Attempting to get a webGL game downloaded from Unity to automatically enter fullscreen mode

Can someone help me with my Unity webGL game issue? I downloaded it from the internet, but I'm not sure what version of Unity was used to create it. When the game starts playing, it displays in a small canvas along with other elements like the Unity ...

Having trouble getting a dropdown menu to function properly with jQuery

Within my project, I have implemented a menu that transforms into a dropdown menu for smaller screens. Below is the HTML code for this functionality: <select> <option value="index.php" id="home">Home</option> <option value="about ...