CSS過渡效果對背景和懸停文本的影響

Question

我試圖使過渡效果在盒子懸停時可同時在文本和背景上使用，但到目前為止，我的結果是兩個單獨的效果。 當我將鼠標懸停在框上時，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 

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

現場jsFiddle演示

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聲明。