Question

很抱歉，如果标题有点具体，但这将在我的网站上完成。这是我目前的代码：

.social {
	background-color: rgba(150,150,150,0.75);
	height: 150px;
	width:200px;
	margin: 20px;
	display: inline-block;
    transition: background .25s ease, box-shadow 0.20s ease-in-out, color 0.20s ease;
    font-weight: bold;
    
}
.social:hover {
	
    background-color: rgb(118, 118, 118);
	box-shadow: 0px 0px 2px 3px rgba(125,125,125,0.75);
    color: rgb(255,255,255);
    
}

.social:hover a {
    color: rgb(255,255,255);
}
a {
    color: rgb(20, 0, 255);
    transition: color 0.5s;
}

a:hover {
    color: rgb(0, 255, 10);
    text-decoration: underline;
    
}

<div class="social"> <span>Blank</span>  <br> <span> Blank</span> <p> <a href="http://www.twitter.com"> Hello <i class="fa fa-twitter"></i></a> <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a> <a href="http://www.plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></p> </div>

当我将鼠标悬停在div上时，它变为灰色，文本变为白色，这就是我想要的。但是，我想要这样，当你将鼠标悬停在链接上时，它会变成浅绿色。

提前致谢。

Answer 1

编辑你的样本。

你需要在<a>上指定悬停，同时将鼠标悬停在div上

.social {
	background-color: rgba(150,150,150,0.75);
	height: 150px;
	width:200px;
	margin: 20px;
	display: inline-block;
    transition: background .25s ease, box-shadow 0.20s ease-in-out, color 0.20s ease;
    font-weight: bold;
    
}
.social:hover {
	
    background-color: rgb(118, 118, 118);
	box-shadow: 0px 0px 2px 3px rgba(125,125,125,0.75);
    color: rgb(255,255,255);
    
}

.social:hover a {
    color: rgb(255,255,255);
}
.social:hover a:hover {
    color: rgb(0, 255, 10);
}
a {
    color: rgb(20, 0, 255);
    transition: color 0.5s;
}

<div class="social"> <span>Blank</span>  <br> <span> Blank</span> <p> <a href="http://www.twitter.com"> Hello <i class="fa fa-twitter"></i></a> <a href="http://www.facebook.com" target="_blank"><i class="fa fa-facebook-official"></i></a> <a href="http://www.plus.google.com" target="_blank"><i class="fa fa-google-plus"></i></a> <a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram"></i></a></p> </div>

在div上悬停时更改链接颜色，但在链接悬停时也会更改链接颜色

1 个答案: