Estoy tratando de diseñar un borde con un pseudo elemento. Tengo un div y este div tiene un borde superior. Quiero que el borde tenga una pequeña flecha cuando coloco el cursor sobre el div. He podido lograr esto, pero lo que quiero es que la pequeña flecha se DESLIZE LENTAMENTE cuando coloco el cursor sobre el div. Intenté agregar algunas transiciones, pero las transiciones parecen no funcionar en los elementos :: before. Revisé todas las preguntas en Stackoverflow haciendo algo similar, pero ninguna de las soluciones parece poder resolver mi problema

Aquí está el código.

Html

 <div class="flexContainer">
        <div class="flexContainerBox flexContainerBox1">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox2">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox3">
            <div class="flexContainerBoxBorderRight"></div>

        </div>
        <div class="flexContainerBox flexContainerBox4">
            <div class="flexContainerBoxBorderRight"></div>

        </div> 
        <div class="clear"></div>
    </div>

Y el CSS

     .flexContainer {
        display: flex;
        flex-direction: row;
      }
    .flexContainerBox {
        flex: 1;
        border-top: 20px solid transparent;
        position: relative;
        padding: 50px;
        font-family: "Open Sans Bold";    
     }

    .flexContainerBoxBorderRight {
      border-right: 1px solid #ccc;
      position: absolute;
      top: 10%;
      bottom: 10%;
      right: 0;
    }
    .flexContainerBox1 {
        border-top-color: #15AF04;
        color: #15AF04
    }
    .flexContainerBox2 {
        border-top-color:#ffd470;
        color: #ffd470;
    }
    .flexContainerBox3 {
        border-top-color: #1b63b1;
        color: #1b63b1;
    }
    .flexContainerBox4 {
        border-top-color: #dd0000;
        color: #dd0000;    
    }
   .flexContainerBox::before{
        -webkit-transition: all 1.5s ease-in-out;
        -moz-transition: all 1.5s ease-in-out;
        -ms-transition: all 1.5s ease-in-out;
        -o-transition: all 1.5s ease-in-out;
        transition: all 1.5s ease-in-out;
    }
    .flexContainerBox:hover::before { 
        content: '';
        position: absolute;
        border: 15px solid transparent;
        border-bottom: 0;
        position: absolute;
        left: 50%;
        top: 0;
        -moz-transform: translate(-50%, 100%);
        -ms-transform: translate(-50%, 100%);
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 0%);
        }
     .flexContainerBox1:hover::before { 
         border-top-color: #15AF04;
    }      
    .flexContainerBox2:hover::before { 
        border-top-color: #ffd470;
    }   
    .flexContainerBox3:hover::before { 
        border-top-color: #1b63b1;
    } 
    .flexContainerBox4:hover::before { 
        border-top-color: #dd0000;
    } 

Cualquier solución, incluso una solución JQUERY o Pure JS será apreciada.

0
Kaylo 21 jul. 2017 a las 00:24

2 respuestas

La mejor respuesta

El problema es que el pseudo-elemento no existe cuando el contenedor no está suspendido:

.flexContainerBox:hover::before { 
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 0%);
}

Debe mover algunos de estos estilos a los estilos .flexContainerBox::before (donde tiene los estilos de transición):

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

Para no animar el centrado de la flecha (translate(-50%, ...)), puede agregar esto:

-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);

Además, hay un pequeño error tipográfico:

transform: translate(-50%, 0%);

Se convierte

transform: translate(-50%, 100%);

Resultado

.flexContainer {
  display: flex;
  flex-direction: row;
}

.flexContainerBox {
  flex: 1;
  border-top: 20px solid transparent;
  position: relative;
  padding: 50px;
  font-family: "Open Sans Bold";
}

.flexContainerBoxBorderRight {
  border-right: 1px solid #ccc;
  position: absolute;
  top: 10%;
  bottom: 10%;
  right: 0;
}

.flexContainerBox1 {
  border-top-color: #15AF04;
  color: #15AF04
}

.flexContainerBox2 {
  border-top-color: #ffd470;
  color: #ffd470;
}

.flexContainerBox3 {
  border-top-color: #1b63b1;
  color: #1b63b1;
}

.flexContainerBox4 {
  border-top-color: #dd0000;
  color: #dd0000;
}

.flexContainerBox::before {
  content: '';
  position: absolute;
  border: 15px solid transparent;
  border-bottom: 0;
  position: absolute;
  left: 50%;
  top: 0;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  -webkit-transition: all 1.5s ease-in-out;
  -moz-transition: all 1.5s ease-in-out;
  -ms-transition: all 1.5s ease-in-out;
  -o-transition: all 1.5s ease-in-out;
  transition: all 1.5s ease-in-out;
}

.flexContainerBox:hover::before {
  -moz-transform: translate(-50%, 100%);
  -ms-transform: translate(-50%, 100%);
  -webkit-transform: translate(-50%, 100%);
  transform: translate(-50%, 100%);
}

.flexContainerBox1:hover::before {
  border-top-color: #15AF04;
}

.flexContainerBox2:hover::before {
  border-top-color: #ffd470;
}

.flexContainerBox3:hover::before {
  border-top-color: #1b63b1;
}

.flexContainerBox4:hover::before {
  border-top-color: #dd0000;
}
<div class="indexContainer whiteContainer flexContainer">
  <div class="flexContainerBox flexContainerBox1">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      WORLD CLASS <span style="color:#111">FACILITIES</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Day & Boarding</li>
        <li>Secondary & Primary</li>
        <li>Ages 2 to 18</li>
        <li>200 Students </li>
        <li>Cambridge IGCSE & GCEs</li>
        <li>Beautiful sports facilities</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox2">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      QUALITY <span style="color:#111">EDUCATION</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Over 10 Years Experience in Quality delivery</li>
        <li>Good resources for Students</li>
        <li>Student Oriented Learning</li>
        <li>Good Teaching staff </li>
        <li>Conducive Environment</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox3">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      PERSONAL <span style="color:#111">TOUCH</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Small Class Sizes</li>
        <li>Low teacher:student Ratio</li>
        <li>Maximum contact with teachers</li>
        <li>Mentorship programs</li>
        <li>Student Counselling</li>
      </ul>
    </div>
  </div>
  <div class="flexContainerBox flexContainerBox4">
    <div class="flexContainerBoxBorderRight"></div>
    <div class="flexContainerBoxHeading">
      HOLISTIC <span style="color:#111">APPROACH</span>
    </div>
    <div class="flexContainerBoxTextBox">
      <ul>
        <li>Innovative Teaching Methods</li>
        <li>Use of Technology in learning</li>
        <li>Developing the "whole" child</li>
        <li>Nurturing Talents & Gifts</li>
        <li>Extra-curricular program</li>
        <li>Christ-Centered School</li>
      </ul>
    </div>
  </div>
  <div class="clear"></div>
</div>
4
LarsW 20 jul. 2017 a las 21:38

Elimine hover de este css .flexContainerBox:hover::before => .flexContainerBox::before y la animación debería funcionar.

0
Vipul Singh 20 jul. 2017 a las 21:30