Selector does not pick another selector

Question

Selector does not pick another selector

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

I have a transition effect on a div that should be applied when hovering on another div.

I tried to use some selectors (+, >) I could not 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>

html css

asked by anonymous 03.06.2016 / 01:34

2 answers

0

Update your CSS to support different browsers, however, CSS3 transitions are not supported by IE versions under 10.

To learn more, visit: CSS3 Transitions

Here is 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;
}

03.06.2016 / 02:54

Problems with Array conversion in Swift 3 How to create table relationships in mysql [closed]

score 0 · Accepted Answer

You're doing it the other way around. That way it really will not work. The + in the css rule means "the next element immediately after". In this case the .cubo has no element after it is you use the + pointing to the parent. So it will not work.

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

Then it would look like this:

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

The previous answer is about something else.