Is it possible to modify the colors of a box and text when hovering over it?

I am currently working on a styled subscribe button and have encountered an issue. I want the background color of the entire box to change, along with the text color, when hovering anywhere on the box. However, my current code only changes the text color when hovering directly on it. Can anyone help me identify where I might be going wrong?

Here is the HTML:

<h3 class="subscribeHeader">
   <a href="http://link.com/" target="_blank">Subscribe</a>
</h3>

And here is the CSS:

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}
htmlcsshover

Answer №1

One can modify CSS properties.

Check out this js fiddle

h3.subscribeHeader {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
}

h3.subscribeHeader a:hover {
  color: #fafaf9;
}

h3.subscribeHeader:hover {
  background-color: #373737;
}

h3.subscribeHeader:hover a{
  color: #fafaf9;
}

Answer №2

check out this code snippet DEMO

<a class='subscribeHeader' href="http://link.com/" target="_blank">Subscribe</a>


a {
  padding-top: 0.7em;
  padding-bottom: 0.7em;
  width: 35%;
  margin: 0 auto;
  border: 1px solid #373737;
  display:block;
}


a.subscribeHeader:hover {
  background-color: #373737;
  color: #ccc;
}

Answer №3

To implement the desired effect, you just need to include the following CSS:

h3.subscribeHeader:hover a {
  color: red;

}

This CSS snippet targets the 'a' element within a hovered-over h3 element.

Answer №4

If you want to modify the text color upon hovering over the h3 element instead of the a, this simple CSS snippet should do the job:

h3.subscribeHeader:hover {
  background-color: #373737;
  color: #fafaf9;
}

Answer №5

h3.subscribeHeader:hover > a {
  background-color: #373737;
  color: #fafaf9;
}

Could you give this a shot? When using the >, it targets an element directly inside that container, so this approach should do the trick. You can also experiment with using + in place of >, or simply go with h3.subscribeHeader:hover a

Answer №6

If you have both child elements and an image sharing the same class:

    <div class="myclass"
<div class="myimageclass"</>
<div class="childelements"</>
</div>

This can cause issues. To avoid this problem, ensure that the child elements and the image background are assigned to two different classes, and then style them accordingly like so:

      .img-back {
       background: #394557 url(images/space.jpg) ;
        background: #394557 url(images/space.jpg),linear-gradient(#eb01a5, #d13531);/*login Page Background */
        -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
       opacity: 0.25;

.mychildelemts {
    width: 375px;
    margin: 0 auto
}

In your HTML code:

<div class="main-container">
    <div class="img-back"
    <div class="myimageclass"<div/>
    </div>
<div class="childelements"
<p> my children</p>
<div/>
</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

My webpage layout doesn't quite accommodate my content, so I need to adjust it to be more zoom

Why does the page container load bigger than the html/body container in mobile mode, as shown in the photo? https://i.sstatic.net/fD1N4.png Here is my CSS: html { margin-top: 48px; width: 100%; } body { margin: 0; width: 100%; background: ...

javascripthtmlcssreactjs

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?

AutoComplete utilizes the Menu component to display MenuItems as demonstrated in the documentation on those respective pages. I am looking to modify the backgroundColor of a MenuItem when it is hovered over. While I have been successful in changing the co ...

cssreactjsmaterial-ui

The POST request did not yield an HttpResponse object; instead, it returned None

When I submit a selection from a dropdown form to views as a POST request, and then use this selection to query data from Django, I encounter an issue while trying to map Django models data to Highcharts following this approach. The error message "the view ...

pythonhtmlcssdjango

Enable images to overlap with pre-set dimensions

Is it achievable for an image to overlap another div (a bootstrap column) while maintaining a fixed size of 155px? I am utilizing bootstrap columns (col-9 and col-3). This is the desired outcome (for illustration purposes, Orange and Grey boxes are image ...

htmlcssbootstrap-4bootstrap-5

CSS based on conditions for 2 specific divs

Hello, I am working on an HTML page where I need to apply CSS only if certain conditions are met. The div with the id "flipbook-page3-front" will always be present on this HTML page. Sometimes, another div with the id "pagesFlipbook" may also appear on t ...

htmlcss

Extracting data from website tables

I've been attempting to retrieve salary information for CSU employees from a specific webpage (). Despite my efforts with the urllib2 and requests libraries, I have not been successful in extracting the table data from the webpage. My suspicion is tha ...

pythonhtmlweb-crawlerlxmlscrape

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

htmlcssangulartypescriptnebular

Enhance your viewing experience with the Zoom feature that activates when

I recently noticed on that I am able to zoom/enlarge a photo by clicking on it. Is there a way for me to incorporate this feature without purchasing the entire theme? While I understand the theme is designed for purchase, I only need this specific functi ...

javascripthtmlzooming

What are the steps to gather user data and generate a roster of individuals currently online?

I am currently working on a way to gather information about the users who are currently logged into my website. Here's how it works: When a user enters my website, they have the option to choose a nickname using an input box. Then, there are five diff ...

javascripthtmlangulardatabasechatroom

Is the code generated by Webflow.com functional and practical?

Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...

htmlcssflexbox

How to customize the background of radio buttons in HTML

I want the background color to stay consistent as lightgray for each <ul>. Currently, clicking the radio button causes the ul's background to change incorrectly. I am unsure of how to loop through all available ul elements using jQuery and woul ...

javascripthtmljquerycss

What is the best way to convert every database field into a public variable in PHP?

After running the query below, I have retrieved all database fields: "SHOW COLUMNS FROM admin" Now I am curious about how to convert each field into a public variable within a class structure since I am working with object-oriented PHP. My first step i ...

phphtmlmysql

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

javascripthtmlxml

Styling buttons with CSS in the Bootstrap framework

I am facing an issue with customizing buttons in Bootstrap. <div class="btn-group"> <button class="btn btn-midd">Link</button> <button class="btn btn-midd dropdown-toggle"> <span class="icon-download-alt icon-gray ...

cssbuttontwitter-bootstraphover

Is there a way to prevent my table from surpassing the width of my card using CSS?

My table inside a card is not responsive on small screens, causing it to go outside the card. I've tried various solutions like using flex on the parent element and setting the table width equal to the card but nothing seems to work. The card should a ...

cssbootstrap-4

The footer is displaying unusual white space beneath it

Recently, I attempted to create a sticky footer using Flexboxes and the <Grid container> Check out the code on Codesandbox However, an issue arose - there was a strange whitespace below the footer. https://i.sstatic.net/2YdaJ.png After some exper ...

htmlcssreactjsmaterial-ui

What could be causing this Form to redirect to the incorrect file path?

I recently updated the login menu for my Admin panel. Initially, the login page was named login.php, but I decided to change it to index.php. Even though I made sure to update the action from login.php to index.php, when I click on the login button it st ...

htmlforms

Utilizing the CSS :not() selector within a nested table

I am having an issue with my AjaxControlToolkit where the main-page CSS is affecting the inner "calendar" popup. To illustrate what I need, what I've tried, and the temporary workaround, I have simplified everything into a one-page example. I am in s ...

csscss-selectorsajaxcontroltoolkit

Having trouble concealing images in HTML Emails on Outlook 2013

Struggling to properly hide images in Outlook 2013? Even when hidden, they are leaving a line of spacing that stretches the email. Here's the code I'm using to hide an image from the desktop version: <tr style="display: none; line-height: 0; ...

htmloutlookgmailhtml-email

HTML5 Division Element Dimensions

I am currently modifying an HTML5 template. The default Bootstrap parameters were set as: col-sm-12 col-md-4 col-lg-4 col-sm-12 col-md-8 col-lg-8 This configuration allotted 20% of the screen width to text and 80% to images, but I want it reversed. Tex ...

csshtmltwitter-bootstrap-3