主页 / 问题 / 686331
Accepted
Abmin
Asked:2020-07-02 23:40:00 +0000 UTC2020-07-02 23:40:00 +0000 UTC

帮助修复 CSS

  • 772

有一个我转换的块。它有一个属性，当鼠标悬停在块上时，我需要属性中的文本是均匀的。我没有做对，也许有人可以提供帮助。

现在： 需要： 在此处输入图像描述 在此处输入图像描述

.pos {
    height: 75px;
    width: 162px;
    left: 100px;
    top: 100px;
    background: blue;
    transform: rotateY(-43deg) rotateX(62deg) rotate(26deg);
    border-radius: 5px;
    position: absolute;
    z-index: 2;
}
.pos:hover:before {
    visibility: visible;
    opacity: 1;
}
.pos:before {
    content: attr(data-crop);
    visibility: hidden;
    position: absolute;
    transform: rotateY(212deg) rotateX(116deg) rotate(148deg);
    font-size: 38px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    margin-top: -72px;
    margin-left: -167px;
    width: 484px;
    text-align: center;
    color: rgb(255, 255, 255);
    transition: 0.5s;
}
<div class="pos" data-crop="Этот текст должен быть ровным"></div>

css

2 个回答

  1. 该解决方案并不完美，但有效

    https://codepen.io/anon/pen/MoVqWJ

     

  .pos {
    height: 75px;
    width: 162px;
    left: 100px;
    top: 100px;
    background: blue;
    transform: rotateY(-43deg) rotateX(62deg) rotate(26deg);
    border-radius: 5px;
    position: absolute;
    z-index: 2;
}
.pos2 {
    height: 75px;
    width: 162px;
    left: 100px;
    top: 100px;
    background: hide;
  
    border-radius: 5px;
    position: absolute;
    z-index: 2;
}
.pos:hover:before {
    visibility: visible;
    opacity: 1;
}
.pos2:hover:before {
    visibility: visible;
    opacity: 1;
}
.pos:before {
    content: attr(data-crop);
    visibility: hidden;
    position: absolute;
    transform: rotateY(212deg) rotateX(116deg) rotate(148deg);
    font-size: 38px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    margin-top: -72px;
    margin-left: -167px;
    width: 484px;
    text-align: center;
    color: rgb(255, 255, 255);
    transition: 0.5s;
}
.pos2:before {
    content: attr(data-crop);
    visibility: hidden;
    position: absolute;
    font-size: 14px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    margin-top: 0px;
    margin-left: -20px;
    width: 200px;
    text-align: center;
    color: rgb(255, 255, 255);
    transition: 0.5s;
}
    <div class="pos" ></div>
<div class="pos2"  data-crop="Этот текст должен быть ровным"></div>

    • 2
  2. Best Answer

    多亏了答案代号 0082016（它有一个带有属性的相邻块），我做到了，当鼠标悬停在块上时，:before相邻块出现

    .pos {
    height: 75px;
    width: 162px;
    left: 100px;
    top: 100px;
    background: blue;
    transform: rotateY(-43deg) rotateX(62deg) rotate(26deg);
    border-radius: 5px;
    position: absolute;
    z-index: 2;
}
.pos:hover + .pos2:before {
    visibility: visible;
    opacity: 1;
}
.pos2:before {
    content: attr(data-crop);
    visibility: hidden;
    position: absolute;
    font-size: 14px;
    line-height: 60px;
    background: rgba(0, 0, 0, 0.46);
    opacity: 0;
    margin-top: 0px;
    margin-left: -20px;
    left: 100px;
    top: 30px;
    width: 200px;
    text-align: center;
    color: rgb(255, 255, 255);
    transition: 0.5s;
}
    <div class="pos" ></div>
<div class="pos2"  data-crop="Этот текст должен быть ровным"></div>

    • 2

相关问题