Question

我对伪元素有疑问：悬停。

使用Firefox和Firefox Developer版： - ：悬停没有效果。 - 仅在我点击元素时才有效。

使用Safari： - 简直没有效果。

[class*='col-'] > table, [class*='col-'] > div {
    width: 100%;
}

[class*='col-'] {
    float: left;
    min-height: 1px;
    width: 8.33%;
    padding-left: 15px;
    padding-right: 15px;
}

.col-1 {
    width: 8.33%;
}
.col-2 {
    width: 16.66%;
}
.col-3 {
    width: 24.99%;
}
.col-4 {
    width: 33.33%;
}
.col-5 {
    width: 41.668%;
}
.col-6 {
    width: 50%;
}
.col-7 {
    width: 58.33%;
}
.col-8 {
    width: 66.664%;
}
.col-9 {
    width: 74.99%;
}
.col-10 {
    width: 83.33%;
}
.col-11 {
    width: 91.66%;
}
.col-12 {
    width: 100%;
}
.col-r {
    float: right;
}

.row:before,
.row:after {
    content: "";
    display: table;
    clear: both;
}

.lessons-blue p, .lessons-blue i {
    color: #6082bb;
    background-color: #6082bb;
}

.lessons-yellow p, .lessons-yellow i {
    color: #b3b300;
    background-color: #b3b300;
}

.lessons-orange p, .lessons-orange i {
    color: #cf6600;
    background-color: #cf6600;
}

.lessons-brown p, .lessons-brown i {
    color: #994d00;
    background-color: #994d00;
}

.lessons-green p, .lessons-green i {
    color: #00aa00;
    background-color: #00aa00;
}

.lessons-purple p, .lessons-purple i {
    color: #7700aa;
    background-color: #7700aa;
}

.lessons-red p, .lessons-red i{
    color: #b2222a;
    background-color: #b2222a;
}

[class*='lessons-'] {
    height: 6em;
    margin-top: 1em;
    overflow: hidden;
}

[class*='lessons-'] a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
    z-index: 90;
}

[class*='lessons-'] p {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 8px;
    padding-top: 50%;
    font-size: 1.4em;
    color: white;
    transition: padding .5s linear;
}

[class*='lessons-'] i {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 3em;
    transform: translatey(125%);
}

[class*='lessons-'] a:hover > p{
    padding-top: 8px;
}

<div class="row">
  <div class="col-4 lessons-orange">
    <a href="#front">
      <i class="devicon-html5-plain"></i>
      <i class="devicon-css3-plain"></i>
      <p>Frontend</p>
    </a>
  </div>
  <div class="col-4 lessons-blue">
    <a href="#php">
      <i class="devicon-php-plain"></i>
      <p>PHP</p>
    </a>
  </div>
  <div class="col-4 lessons-red">
    <a href="#rbpy">
      <i class="devicon-python-plain"></i>
      <i class="devicon-ruby-plain"></i>
      <p>Ruby / Python</p>
    </a>
  </div>
  <div class="col-4 lessons-yellow">
    <a href="#javascript">
      <i class="devicon-javascript-plain"></i>
      <i class="devicon-nodejs-plain"></i>
      <p>Javascript</p>
    </a>
  </div>
  <div class="col-4 lessons-green">
    <a href="#services">
      <i class="devicon-mongodb-plain"></i>
      <i class="devicon-mysql-plain"></i>
      <i class="devicon-git-plain"></i>
      <i class="devicon-ssh-plain"></i>
      <i class="devicon-nginx-plain"></i>
      <p>Services</p>
    </a>
  </div>
  <div class="col-4 lessons-purple">
    <a href="#systems">
      <i class="devicon-linux-plain"></i>
      <i class="devicon-apple-plain"></i>
      <i class="devicon-windows8-plain"></i>
      <p>Systems</p>
    </a>
  </div>
  <div class="col-4 lessons-brown">
    <a href="#cfamily">
      <i class="devicon-c-plain"></i>
      <i class="devicon-cplusplus-plain"></i>
      <i class="devicon-csharp-plain"></i>
      <p>C Family</p>
    </a>
  </div>
</div>

提前感谢您的帮助！

Answer 1

他们在野生动物园工作。它可能是您正在运行的机器吗？

Answer 2

为什么不在css3中使用Transition属性？

 <style type="text/css">
.testing1{
    height: 50px;
    background-color: #D92A2D;
    width: 100px;
    display: flex;
  flex-direction: column;
    -webkit-transition: height 1s; /*Safari 3.0 to 6*/
    transition: height 1s;
}
.testing1 p {
    text-align: center;
    color: #FFF;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    margin-top: auto;
}
.testing1:hover{
    height: 75px;
}
 </style>

和div

 <div class="testing1">
     <p>RED</p>
 </div>

当然，这可以应用于任何元素和任何悬停状态。

这也是一个很方便的内容，如果你添加-webkit和-moz特定的电话，你可以在所有电话中产生相同的效果。

W3 Schools on Transitions

CSS：悬停不起作用（在桌面上）

2 个答案: