<Form> hovers together with <link>s HELP

HTML-CSS
1

I was practicing and playing around with CSS features and got stuck with this issue- so i made the links turn to green whenever you hover over them, but for some reason the form section below also turns green when you hover over it even though i didnt intend it to . Can someone point me what my mistake is?

<!DOCTYPE html>
              <html>
                   <head>
                        <title>Lev</title>
                        <link rel="stylesheet" href="style.css">
                  </head>
<body>
     <div class="categories">
      <h1 id="anim">Hellow world</h1> 
    </div>
    <div>
<ul class="list">
    <li><a href="#">Category 1</li>
    <li><a href="#">Category 2</li>
    <li><a href="#">Category 3</li>
    <li><a href="#">Category 4</li>
</ul>
    </div>
   <form class="my-form">
          <div class="form-group">
              <label>Name: </label>
              <input type="text" name="name" placeholder="Enter your name">
          </div>
          <div>
              <label>Email: </label>
              <input type="text" name="email" placeholder="Enter your email">
          </div>
          <div>
              <label>Message: </label>
              <textarea name="message" placeholder="Type your message"></textarea>
          </div>
          <input class="button" id="hover" type="submit" value="Submit" name="">
      </form>
 </body>
 </html>
________________________________________________________________________
CSS
a{
    text-decoration: none;
    color: darkblue;
}
a:hover{
    transform: scale (2);
    color: green;
    text-decoration: underline;
 }
a:active{
    color:red;
}


.categories h1{
    font-family: cursive;
    font-weight: 30px;
    text-align: center;
     animation-name: anim;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-fill-mode:forwards;

}
.list{
    border:2px #ccc solid;
    padding: 10px;
    border-radius: 20px;
    margin: auto;
    padding-left: 50px;
    list-style: circle;
    font-family: cursive;
    font-size: 20px;
    }


@keyframes anim{
    0%{
        background-image: repeating-linear-gradient(45deg, purple, pink,cyan);
        }
    50%{
        background-image: linear-gradient(45deg, yellow, red, blue);
    }
    100%{
        background-image: linear-gradient(45deg,magenta,brown,green);
        
    }
}
.my-form{
    padding: 20px;
}
.my-form.form-group{
    padding-bottom: 15px;
}
.my-form label{
    display: block;
    font-family: cursive;
}
.my-form input[type="text"], .my-form textarea
{
    padding: 5px;
    width:15%;
    
}
.my-form input[type="submit"]{
    background-color: lightpink;
    color:black;
    padding: 10px 15px;
    border=none;
    font-weight: 600;
    font-family: cursive;
    margin-top: 20px;
     }
`````````````````````````````````````````````````````````````````````````````````````````````````````````````````````````
2

From what I can see, it has something to do with the way the interpreter (Chrome, potentially) handles the form tag. That is, in order to make the elements responsive to event handlers, it wraps it within an a tag:

image

1 Like
3

You didn’t close the Category links.

You have:
<li><a href="#">Category 1</li>

Should be:
<li><a href="#">Category 1</a></li>

1 Like