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:hover .meta-text h3 a {
  color: black!important;
}

现场jsFiddle演示

Answer 2

}
.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 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声明。