css 悬停时背景和文本的过渡效果

Question

我试图让过渡效果在框悬停时同时作用于文本和背景，但到目前为止我的结果是两个独立的效果。当我将鼠标悬停在框上时，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

Answer 1

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

是这样的吗？它是控制此处文本颜色的元文本。

Answer 2

试试这个：

.stylish-popular-widget:hover .meta-text h3 a {
  color: black!important;
}

Live jsFiddle Demo

Answer 3

您不一定需要多个 :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 声明。

css 悬停时背景和文本的过渡效果

css transition effects on background AND text on hover

css

transition