我想要实现的效果是,无论您将鼠标悬停在“图标”还是“标题”文本上,“图标”都会缩放,“图标”背景会变色,“标题”会变色。我不希望“标题”缩放。
现在,当您将鼠标悬停在“标题”上时,它会产生预期的效果,但当您悬停在图标区域上时,我似乎无法让标题改变颜色。
这是 fiddle http://jsfiddle.net/6suqg1mL/ .
HTML
<div>
<a href="#" class="icon-circle">Icon
<p class="icon-title">Title</p>
</a>
</div>
CSS
.icon-circle {
display: block;
width: 100px;
height: 100px;
border-radius: 66px;
border: 5px solid #000000;
font-size: 20px;
color: #000000;
line-height: 100px;
text-align: center;
text-decoration: none;
background: rgba(0, 0, 0, .1);
-webkit-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
}
.icon-circle:hover {
border: 5px solid #000000;
color: blsvk;
text-decoration: none;
background: rgba(255, 0, 0, .3);
font-size: 30px;
/* ease-in-out */
}
.icon-title {
line-height: 20px;
text-align: center;
font-size: 40px;
}
.icon-title:hover {
color: red;
}
最佳答案
当用户将鼠标悬停在 .icon-circle
上然后更改 的颜色时,您可以使用此
..icon-circle:hover .icon-title
选择器。图标标题
.icon-circle:hover .icon-title {
color: red;
}
.icon-circle {
display: block;
width: 100px;
height: 100px;
border-radius: 66px;
border: 5px solid #000000;
font-size: 20px;
color: #000000;
line-height: 100px;
text-align: center;
text-decoration: none;
background: rgba(0, 0, 0, .1);
-webkit-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-moz-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
-o-transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
transition: all 700ms cubic-bezier(0.420, 0.000, 0.580, 1.000);
/* ease-in-out */
}
.icon-circle:hover {
border: 5px solid #000000;
color: blsvk;
text-decoration: none;
background: rgba(255, 0, 0, .3);
font-size: 30px;
/* ease-in-out */
}
.icon-title {
line-height: 20px;
text-align: center;
font-size: 40px;
}
.icon-circle:hover .icon-title {
color: red;
}
<div>
<a href="#" class="icon-circle">Icon
<p class="icon-title">Title</p>
</a>
</div>
关于html - CSS Hover 以不同方式控制多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34216038/