[英]css transition effects on background AND text on hover
我试图使过渡效果在盒子悬停时可同时在文本和背景上使用,但到目前为止,我的结果是两个单独的效果。 当我将鼠标悬停在框上时,bg上的过渡效果很好,但仅当我将文本本身悬停时,文本的效果才会发生。 我想通过将鼠标悬停在整个框中来应用颜色更改,而不必也悬停文本。 我需要将bG颜色从黑色更改为白色,将标题从白色更改为黑色!
我的CSS是
.stylish-popular-widget { height: 150px; position: relative; width: 100%; } .stylish-popular-widget img { height: 150px; max-width: 100%; } .stylish-popular-widget .meta-text { background: rgba(0,0,0,.3); bottom: 0; top: 65%; /*adjust BG start position*/ left: 0; right: 0; position: absolute; text-align: left; padding-left: 10px; moz-transition: 1s; ms-transition: 1s; o-transition: 1s; transition: 1s; webkit-transition: 1s; } } .stylish-popular-widget .meta-text h3 { color: #FF0000 !important; } .stylish-popular-widget .meta-text h3 a { color: #fff !important; font-size: 25px; letter-spacing: 1px; } .stylish-popular-widget .meta-text h3 a:hover { text-decoration: none; color: #000 !important; } .stylish-popular-widget .meta-text h3 :hover { text-decoration: none; color: #000 !important; } .stylish-popular-widget .meta-text span.date { color: rgba(59,59,59,1); font-size: 11px; letter-spacing: 1px; padding-top: 30px; } .stylish-popular-widget:hover > .meta-text { background: rgba(255,255,255,.8); top:inherit; top: 0; }
<?php ?> <div class="stylish-popular-widget"> <a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?> <div class="meta-text"> <h3><a href="<?php echo get_permalink() ?>"> TEST</h3> <span class="date">thstrhsthths</span></a> </div> </a> </div> <?php
}
.stylish-popular-widget img
{
height: 150px;
max-width: 100%;
}
.stylish-popular-widget .meta-text
{
background: rgba(0,0,0,.3);
color:white;
bottom: 0;
top: 65%; /*adjust BG start position*/
left: 0;
right: 0;
position: absolute;
text-align: left;
padding-left: 10px;
moz-transition: 1s;
ms-transition: 1s;
o-transition: 1s;
transition: 1s;
webkit-transition: 1s;
}
}
.stylish-popular-widget .meta-text h3
{
}
.stylish-popular-widget .meta-text h3 a
{
color: inherit !important;
font-size: 25px;
letter-spacing: 1px;
}
.stylish-popular-widget .meta-text h3 a:hover
{
text-decoration: none;
color: inherit !important;
}
.stylish-popular-widget .meta-text :hover
{
text-decoration: none;
color:black;
}
.stylish-popular-widget .meta-text span.date
{
color: rgba(59,59,59,1);
font-size: 11px;
letter-spacing: 1px;
padding-top: 30px;
}
.stylish-popular-widget:hover > .meta-text
{
background: rgba(255,255,255,.8);
top:inherit;
top: 0;
}
<div class="stylish-popular-widget">
<a href="<?php echo get_permalink() ?>" rel="bookmark"><?php the_post_thumbnail('popular_posts_img'); ?>
<div class="meta-text">
<h3><a href="<?php echo get_permalink() ?>">
TEST</h3>
<span class="date">thstrhsthths</span></a>
</div>
</a>
</div>
像这样吗 它是控制此处文本颜色的元文本。
您不一定需要多个:hover
-s来执行此操作。 您可以使用继承,具体取决于您的设计:
.stylish-popular-widget .meta-text {
background: rgba(0,0,0,.3);
bottom: 0;
top: 65%; /*adjust BG start position*/
left: 0;
right: 0;
position: absolute;
text-align: left;
padding-left: 10px;
moz-transition: 1s;
ms-transition: 1s;
o-transition: 1s;
transition: 1s;
webkit-transition: 1s;
color: #fff;
}
.stylish-popular-widget .meta-text h3 a {
font-size: 25px;
letter-spacing: 1px;
color: inherit;
}
.stylish-popular-widget:hover > .meta-text {
background: rgba(255,255,255,.8);
top: 0;
color: black;
}
您可能不需要所有这些!important
声明。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.