不透明的p标签里面的div悬停在帖子

Question

我想在悬停进行发布过渡在顶部和底部，我使用此代码。

.moade3 { 
 
\t margin: 100px; 
 
\t width: 200px; 
 
\t height: 300px; 
 
} 
 
.fo2 { 
 
\t background: #000; 
 
\t height: 1px; 
 
\t opacity: 0; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
} 
 
.block:hover > .fo2 { 
 
\t height: 40px; 
 
\t opacity: .3; 
 
} 
 
.block { 
 
\t background: #B8B8B8; 
 
\t height: 300px; 
 
\t width: 200px; 
 
} 
 
.t7t { 
 
\t background: #000000; 
 
\t height: 1px; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t opacity: 0; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
\t transform: rotatex(180deg); 
 
\t transform-origin: top; 
 
} 
 
.block:hover > .t7t { 
 
\t height: 100px; 
 
\t opacity: .3; 
 
} 
 
.shame { 
 
\t transform: rotatex(180deg); 
 
\t opacity: 1; 
 
\t font-weight: bold; 
 
} 
 
\t .link{ 
 
\t \t text-decoration: none; 
 
\t \t color:#FFFFFF; 
 
\t \t font-weight: bold; 
 
\t \t } 
 
\t .link:hover{ 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t color:#FFFFFF; 
 
\t \t \t \t opacity: 1; 
 
\t \t \t \t font-weight: bold; 
 
\t }

<div class="moade3"> <a class="link" href="#"> 
 
    <div class="block"> 
 
    <div class="fo2 text-center"> Categories </div> 
 
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg"> 
 
    <div class="t7t text-center"> 
 
     <p class="shame">Name of post and Discraption Area</p> 
 
     <h5 class="shame"> Name of post </h5> 
 
    </div> 
 
    </div> 
 
    </a> </div>

这里的问题是我不能做的<p>标记1， 不透明的div影响款 标签需要把它完全不透明是不透明度（.shame或p & h5） 它也必须在div内。

Answer 1

如果您使用background：rgba（0,0,0,0.5）设置背景颜色而不是不透明度，然后将其设置回0 alpha值，则可以实现此目的。这也保留了流畅的动画。

.moade3 { 
 
\t margin: 100px; 
 
\t width: 200px; 
 
\t height: 300px; 
 
} 
 
.fo2 { 
 
\t background: #000; 
 
\t height: 1px; 
 
\t opacity: 0; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
} 
 
.block:hover > .fo2 { 
 
\t height: 40px; 
 
\t opacity: .3; 
 
} 
 
.block { 
 
\t background: #B8B8B8; 
 
\t height: 300px; 
 
\t width: 200px; 
 
} 
 
.t7t { 
 
\t height: 1px; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t opacity: 1; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
\t transform: rotatex(180deg); 
 
\t transform-origin: top; 
 
} 
 
.block:hover > .t7t { 
 
\t height: 100px; 
 
    background:rgba(0, 0, 0, 0.51); 
 
} 
 
.block:hover .shame{ 
 
    opacity:1; 
 
} 
 
.shame { 
 
\t transform: rotatex(180deg); 
 
\t opacity: 0; 
 
\t font-weight: bold; 
 
} 
 
\t .link{ 
 
\t \t text-decoration: none; 
 
\t \t color:#FFFFFF; 
 
\t \t font-weight: bold; 
 
\t \t } 
 
\t .link:hover{ 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t color:#FFFFFF; 
 
\t \t \t \t opacity: 1; 
 
\t \t \t \t font-weight: bold; 
 
\t }

<div class="moade3"> <a class="link" href="#"> 
 
    <div class="block"> 
 
    <div class="fo2 text-center"> Categories </div> 
 
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg"> 
 
    <div class="t7t text-center"> 
 
     <p class="shame">Name of post and Discraption Area</p> 
 
     <h5 class="shame"> Name of post </h5> 
 
    </div> 
 
    </div> 
 
    </a> </div>

Answer 2

不幸的是有透明度的元素中的任何改变儿童上也将受到影响。

为什么不能在背景上使用RGBA，而不是像这样：

.moade3 { 
 
\t margin: 100px; 
 
\t width: 200px; 
 
\t height: 300px; 
 
} 
 
.fo2 { 
 
\t background: rgba(0, 0, 0, 0.3);; 
 
\t height: 1px; 
 
\t opacity: 0; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
} 
 
.block:hover > .fo2 { 
 
\t height: 40px; 
 
\t opacity: 1; 
 
} 
 
.block { 
 
\t background: #B8B8B8; 
 
\t height: 300px; 
 
\t width: 200px; 
 
} 
 
.t7t { 
 
\t background: rgba(0, 0, 0, 0.3); 
 
    
 
\t height: 1px; 
 
\t position: absolute; 
 
\t width: 200px; 
 
\t opacity: 0; 
 
\t transition: .3s all cubic-bezier(0.56, 0.28, 0.34, 1.0); 
 
\t transform: rotatex(180deg); 
 
\t transform-origin: top; 
 
} 
 
.block:hover > .t7t { 
 
\t height: 100px; 
 
\t opacity: 1; 
 
    
 
} 
 
.shame { 
 
\t transform: rotatex(180deg); 
 
\t opacity: 1; 
 
\t font-weight: bold; 
 
} 
 
\t .link{ 
 
\t \t text-decoration: none; 
 
\t \t color:#FFFFFF; 
 
\t \t font-weight: bold; 
 
\t \t } 
 
\t .link:hover{ 
 
\t \t \t \t text-decoration: none; 
 
\t \t \t \t color:#FFFFFF; 
 
\t \t \t \t opacity: 1; 
 
\t \t \t \t font-weight: bold; 
 
\t }

<div class="moade3"> <a class="link" href="#"> 
 
    <div class="block"> 
 
    <div class="fo2 text-center"> Categories </div> 
 
    <img class="image" src="https://i2.wallpaperscraft.com/image/summer_trees_autumn_mountains_nature_84572_200x300.jpg"> 
 
    <div class="t7t text-center"> 
 
     <p class="shame">Name of post and Discraption Area</p> 
 
     <h5 class="shame"> Name of post </h5> 
 
    </div> 
 
    </div> 
 
    </a> </div>