Jump to content

I need help with hovering


MadsKaiser
 Share

Recommended Posts

Hi!

I started 2 days ago on css. I have mainly used html :) I ran into a little problem with hovering. 

I have an title and an subtitle. I want the title to move up a little and the subtitle to fade in when hovering over the background picture. So when "img-text-wrapper:hover" activates, i want to have it to have action in both ".subtitle" and ".subtitle2". I think it is because the padding of the subtitle is overlapping the padding of the title, so i cant do something like this, cause then the subtitle wont activate. I hope you understand :/ :/

.country:hover .subtitle2{

    font-weight: 600;

    color: black;

    padding-bottom: 60%;

}

 
.img-text-wrapper:hover .subtitle{
    font-weight600;
    colorlightseagreen
}
 
.country .subtitle2{
    transition0.5s;
    font-weight600;
    font-size3.5em;
    colorrgb(197241239);
    padding0%;
}
 
.img-text-wrapper .subtitle{
    transition0.5s;
    font-weight600;
    colortransparent;
}
Link to comment
Share on other sites

  • 4 weeks later...

You have declare to class name after hover but actually hover is pseudo-classes and it defines after class name

.img-text-wrapper .subtitle :hover
{

font-weight:600;

color:lightgreen;

}



.country .subtitle2 : hover 
{

font-weight:600;

color:black;

padding-bottom:60%;

}

 

Link to comment
Share on other sites

  • 2 months later...
<!DOCTYPE html>
<html>
  <head>
    <style>
      .class {
        background-color: white;
      }
      .class:hover {
        background-color: grey;
      }
    </style>
  </head>
  <body>
    <div class="class">...</div>
  </body>
</html>

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...