Selector does not take another selector

Question

I have a transitional effect on a div that should be applied when I do Hover in another div.

I tried to use some selectors ( +, >) I couldn’t believe it’s the way I’m using them

.box-toogle {
    width: 100%;
    height: 150px;
	top: 0px;
    position: relative;
    transition: top 1s;
background-color: red;
}

.tgl {
	position: relative;
	top: 80px;
}

.cubo {
	background-color: #0078e1;
	border-radius: 50%;
	box-shadow: 4px 7px 22px -9px rgba(0,0,0,0.25);
	height: 30px;
	width: 30px;
	position: relative;
	top: 90px;
	left: 20px;
	z-index: 1;
	transition: 1s;
	line-height: 30px;
	text-align: center;
	color: #eeeeee;
	font-weight: bolder;
	font-size: 18px;
	cursor: pointer;
}

.cubo:hover {
	background-color: #eeeeee;
	color: #0078e1;	
}

.cubo:hover + .box-toogle {
    top: -120px;
}

<div class="box-toogle">
			<h3 class="logo">Planejamento de Viagem</h3>
		<div class="tgl">
			<div >
				<p>t>este</p>
			</div>
		</div>
		<div class="cubo">X</div>
</div>

Answer 1

Upgrade your CSS to support different browsers, but CSS3 Transitions is not supported by versions below 10 IE.

To learn more, visit: CSS3 Transitions

Follow the updated code:

.cubo {
    background-color: #0078e1;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    box-shadow: 4px 7px 22px -9px rgba(0,0,0,0.25);
    -moz-box-shadow: 4px 7px 22px -9px rgba(0,0,0,0.25);
    -webkit-box-shadow: 4px 7px 22px -9px rgba(0,0,0,0.25);
    height: 30px;
    width: 30px;
    position: relative;
    top: 90px;
    left: 20px;
    z-index: 1;
    transition: 1s;
    -o-transition: 1s;
    -moz-transition: 1s;
    -webkit-transition: 1s;
    line-height: 30px;
    text-align: center;
    color: #eeeeee;
    font-weight: bolder;
    font-size: 18px;
    cursor: pointer;
}

Answer 2

You’re doing it backwards. That way it really won’t work. The + in the css rule means "the next element immediately after". In this case the . cube no longer has any element after it is you use the + pointing to the parent. So it won’t work.

If I understand correctly, you want the . cube when an event happens in . box-toogle, but wrote the inverted css.

Then it would look like this:

.box-toogle:hover + .cubo {
    top: -120px;
}

The previous answer deals with something else.