LightMe

Hover on .mainclass.subclass working; can't prevent hover action on a.LightMe

by Antal Orcsik

HTML

<div class="container">
    <div class="mainclass subclass">
        .mainclass.subclass
        <a href="#" class="LightMe"><p>.LightMe</p></a>
    </div>
    <div class="cover"></div>
</div>

CSS

body {
  background-color: #099;
  height: 100%;
  width: 100%;
  margin-top:200px;
}

.container {
  position: absolute;
  left: 40%;    
}

.mainclass.subclass{
  height: 100px;
  width: 200px;
  padding: 20px;
  background-color: #ccc;    
  cursor: pointer;
 }

a {
  display: block;
  position: absolute;
  padding: 1px;
  border-radius: 15%;
}

.cover {
    position: absolute;
    top: -120px;
    left: -200px;
    height: 100px;
    width: 100px;
    z-index: 11;    
}

a.LightMe {
  /*Starting state */
    background-color: white;
    border-style:solid;
    border-color:#fff;
    top: -120px;
    left: -200px;
    height: 80px;
    width: 80px;
    z-index: 10;
    opacity: 0;
    transition:left 0.55s  ease, opacity .5s .7s ease;
    -webkit-transition:left 0.55s  ease, opacity .5s .7s ease;
    -o-transition:left 0.55s  ease, opacity .5s .7s ease;
}

.mainclass.subclass:hover a.LightMe {
/*Ending state*/
  left: 80px;
  opacity: 1;
  transition:left 0.55s .7s ease, opacity .5s ease;
  -webkit-transition:left 0.55s .7s ease, opacity .5s ease;
  -o-transition:left 0.55s .7s ease, opacity .5s ease;
}

.mainclass.subclass:hover {
    transition: background-color 500ms ease;
    -webkit-background-color 500ms ease;
    -o-background-color 500ms ease;
    background-color:#999;
}