Question

我正在尝试使用伪元素设置边框样式。我有一个div，这个div有一个顶部边框。当我将鼠标悬停在div上时，我希望边框有一个小箭头。我已经能够实现这一点，但是我想要的是当我将鼠标悬停在div上时，小箭头 SLIDE DOWN SLOWLY 。我试图添加一些过渡但转换似乎不适用于:: before元素。我已经查看了Stackoverflow上所有问题类似的问题，但没有一个解决方案似乎能够解决我的问题

这是代码。

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>

和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;
    }

任何解决方案，即使是JQUERY或Pure JS解决方案也将受到赞赏。

Answer 1

问题是当容器没有悬停时，伪元素不存在：

.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%);
}

您应该将其中一些样式移动到.flexContainerBox::before样式（具有过渡样式的样式）：

.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;
}

要不对箭头的居中（translate(-50%, ...)）设置动画，可以添加以下内容：

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

另外，还有一个小错字：

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

变为

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

结果

.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>

Answer 2

从此css hover =＆gt;中删除.flexContainerBox:hover::before .flexContainerBox::before，动画应该有用。

伪元素（:: before）上的CSS3转换不起作用

2 个答案:

结果