Can an item that is in the same container be affected?

Question

Can an item that is in the same container be affected?

Navigation

#1 by (0 votes)

1

Well, I'm in a project, you'd better see the code, I think that css3 does not allow it to affect with a selector an element that is before the main element. If you execute it, you will see that the CSS does not affect the element. First so that it makes small, and bugea and the Second element is put down because it exceeds 100%

/* COLORES: #128C4E  #8C261A #024027 #401309*/


.Proyectos ul li.ProyectoNormal {
  background: #128C4E;
  width: 40%;
  padding: 4%;
  margin: 1%;
}
.Proyectos ul li.ProyectoGrande {
  background: #128C4E;
  width: 90%;
  padding: 4%;
  margin: 1%;
}
.Proyectos ul li {
  border-top: 5px solid white;
  height: 40px;
  list-style: none;
  float:left;
}
.Proyectos ul li a {
  text-decoration: none;
  color:black;
  text-align: center;
}






.Proyectos ul li.Primero:hover {
  animation-name: Primero;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.Proyectos ul li.Segundo:hover {
  animation-name: Segundo;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes Primero {
    0% { height: 40px; width: 40%;}
    50% { height: 150px; width: 50%;}
    100% { height: 200px; width: 60%;}
}
@keyframes Segundo {
    0% {float: right; height: 40px; width: 40%;}
    50% {float: right; height: 150px; width: 50%;}
    100% {float: right; height: 200px; width: 60%;}
}







.Proyectos ul li.Primero:hover ~ .Segundo{
  animation-name: Pequeño;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
.Proyectos ul li.Segundo:hover ~ .Primero{
  animation-name: Pequeño;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes Pequeño {
    0% { height: 40px; width: 40%;}
    50% { height: 150px; width: 30%;}
    100% { height: 200px; width: 20%;}
}






.Proyectos ul li.ProyectoGrande:hover {
  border-top: 5px solid black;
  animation-name: Grande;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes Grande {
    0% { height: 40px; }
    50% { height: 150px; }
    100% { height: 200px; }
}

      <div class="Proyectos">
        <ul>
            <li class="ProyectoNormal Primero"><a href="">

                <h2>Proyecto 1</h2>

            </a></li>
            <li class="ProyectoNormal Segundo"><a href="">

                <h2>Proyecto 2</h2>

            </a></li>

          <li class="ProyectoGrande"><a href="">

              <h2>Proyecto 3</h2>

          </a></li>
        </ul>
      </div>

html css

asked by JuamBer 10.06.2018 в 12:21

source

1 answer

Use or Create Attributes for data validation in properties? Take data from the array to independent variables. MYSQL

score 0 · Accepted Answer

You can not go "backwards" in the hierarchy of the DOM with CSS, all the more affecting elements at the same level, and only if they are behind the element, that is, you can do:

.primero:hover ~ .segundo{

But you can not affect .first from .second using only CSS, you have to use JS