CODEWITHSUNDEEP
htmlcsshover
user2498890
user2498890

Reputation: 1556

Changing a box colour and text colour on hover?

I have the following code which is for a styled subscribe button and I've been trying to get it so that on hover the background colour of the whole box changes and also the colour of the text 'Subscribe' to change colour as well. At the moment the code I have below changes the background colour but only changes the colour of the text if i hover directly on it. I want to be able to hover anywhere on the box and the two elements change colour together... Any one able to point out where I'm going wrong?

HTML: 

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

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;
}

Upvotes: 4

Views: 18063

Answers (6)

RileyManda
RileyManda

Reputation: 2641

If your child elements and the image are sharing the same class:

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

Then you will have a problem. Make sure the child elements and your image background are in two different classes,then style as desired like this:

      .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
}

Then in your html: 

<div class="main-container">
    <div class="img-back"
    <div class="myimageclass"<div/>
    </div>
<div class="childelements"
<p> my children</p>
<div/>
</div>

Upvotes: 0

Alex Szabo
Alex Szabo

Reputation: 3276

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

Can you please try this? The > means that it will affect an element right inside that box, so this should work. You can try + instead of > or just simply h3.subscribeHeader:hover a

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

try this code 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;
}

Upvotes: 4

Anant Dabhi
Anant Dabhi

Reputation: 11104

CSS can be over ridden.

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;
}

Upvotes: 5

SCHTAILian
SCHTAILian

Reputation: 448

You need to change the text color when you hover the h3 not the a so basically this should to the trick.

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

Upvotes: 1

Feroza
Feroza

Reputation: 397

simplay add following css

h3.subscribeHeader:hover a {
  color: red;

}

this will call child element 'a' when hover over h3

Upvotes: 1

Related Questions