CODEWITHSUNDEEP
csscss-transitions
Devo
Devo

Reputation: 301

CSS Transition - Hover Over Parent, Effect Child, Hover Over Child

Check out this jsfiddle for my current implementation.

<div id="menu">
  <a href="#" class="left"><p>Left</p></a>
  <a href="#" class="right"><p>Right</p></a>
  <a href="#" class="top"><p>Top</p></a>
  <a href="#" class="bottom"><p>Bottom</p></a>
  <div id="icon">
    <p class="icon-text">Hover over me</p>
  </div>
</div>

I have a parent div, which when I hover over it, moves a few child items around and reveals them. However, when I hover over the child items, I want to reveal more of them, but the browser still thinks I'm simply hovering over the parent.

Any ideas?

CSS in question:

body {
  background-color: #8bd8f4;
  height: 100%;
  width: 100%;
}

#menu {
  position: absolute;
  top: 25%;
  left: 43%;
  height: 210px;
  width: 210px;
  border-radius: 100%;
  border:7px solid #333;
  background-color: #8bd8f4;
  cursor: pointer;
  transition:all 0.7s;
  -webkit-transition:all 0.7s;
  -moz-transition: all 0.7s;
}

#menu:hover a.left {
  left: -15%;
}

#menu:hover a.right {
  right: -15%;
}

#menu:hover a.top {
  top: -15%;
}

#menu:hover a.bottom {
  bottom: -15%;
}

#icon {
  position: absolute;
  left: 4.5px;
  top: 4.5px;
  height: 200px;
  width: 200px;
  border-radius: 100%;
  background-color: #333;
  color: #8bd8f4;
  text-align: center;
}

p.icon-text {
  position: relative;
  font-size: 22px;
  font-family: 'Open Sans', Sans-Serif;
  font-weight: bold;
  text-transform: uppercase;
  top: 30%;
}

a {
  position: absolute;
  text-decoration: none;
  color: #8bd8f4;
  background-color: #333;
  text-transform: uppercase;
  padding: 10px;
  font-size: 18px;
  font-family: 'Open Sans', Sans-Serif;
  font-weight: bold;
  text-align: center;
  border-radius: 25%;
}

a.left {
  top: 26.5%;
  left: 5%;
  height: 80px;
  width: 150px;
  z-index: -1;
  transition:left 0.7s;
  -webkit-transition:left 0.7s;
  -moz-transition: left 0.7s;
}

a.left:hover {
  left: -100px;
}

a.right {
  top: 26.5%;
  right: 5%;
  height: 80px;
  width: 150px;
  z-index: -1;
  transition:right 0.7s;
  -webkit-transition:right 0.7s;
  -moz-transition: right 0.7s;
}

a.right:hover {
  right: -100px;
}

a.top {
  top: 5%;
  left: 26%;
  width: 80px;
  height: 150px;
  z-index: -1;
  transition:top 0.5s;
  -webkit-transition:top 0.5s;
  -moz-transition: top 0.5s;
}

a.top:hover {
  top: -100px;
}

a.bottom {
  bottom: 5%;
  left: 26%;
  width: 80px;
  height: 150px;
  z-index: -1;
  transition:bottom 0.7s;
  -webkit-transition:bottom 0.7s;
  -moz-transition: bottom 0.7s;
}

a.bottom:hover {
  bottom: -100px;
}

Upvotes: 3

Views: 7467

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206048

Simly add a #menu > a wherever you point to your menu children:

http://jsbin.com/asewup/1/edit

example:

#menu > a.left {
  top: 26.5%;
  left: 5%;
  height: 80px;
  width: 150px;
  z-index: -1;
  transition:left 0.7s;
  -webkit-transition:left 0.7s;
  -moz-transition: left 0.7s;
}

#menu > a.left:hover {
  left: -100px;
}

and so on for the other 3 elements

Also to prevent further issues, be more specific with your selectors, so instead of using 

a {
  position: absolute; /* this is not good, target globally every single anchor */
  text-decoration: none;
   ...

use:

#menu > a {
  position: absolute;
  text-decoration: none;
  ...

Upvotes: 5

Related Questions