Clever Geek Handbook

Change box color and text color on hover?

I have the following code which is for a styled subscribe button and I was trying to get it so that on hover the background colors of the whole box change, as well as the colors of the Subscribe text to change the color as Well. At the moment, the code I have below changes the background color but changes the text color if I find it right on top of it. I want to be able to hover anywhere on the box and these two items change color together ... Anyone can point out where I am 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;
}
+3


source to share


6 answers


CSS can be overloaded.

js violin



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


source


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


source 


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

Can you try this? >

means it will affect the element right inside that box, so this should work. You can try +

instead >

or just simplyh3.subscribeHeader:hover a

+1


source


simplay add the following css

h3.subscribeHeader:hover a {
  color: red;

}

this will call the child element 'a' on hover over h3

+1


source


You need to change the color of the text if you h3

don't hover a

, so basically this should be a trick.

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


source


If your children and image are of the same class:

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

Then you have a problem. Make sure the children and background of the image are in two different classes, then style as desired:

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


source






More articles:


All Articles