CSS 悬停以不同方式控制多个元素

Question

我想要实现的效果是，无论你将鼠标悬停在 "Icon" 还是 "Title" 文本上 "Icon" 缩放，"Icon" 背景都会改变颜色， "Title" 改变颜色。我不希望 "Title" 缩放。

现在，当您将鼠标悬停在 "Title" 上时，它具有预期的效果，当您悬停在图标区域上时，我似乎无法让标题改变颜色。

这里是 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;
}

Answer 1

当用户将鼠标悬停在 .icon-circle 上然后更改 .icon-title 的颜色时，您可以使用此 .icon-circle:hover .icon-title 选择器。

.icon-circle:hover .icon-title {
  color: red; 
}

Jsfiddle

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

Answer 2

我相信这会成功-

  .icon-circle:hover > .icon-title {
      color:red;
    }

CSS 悬停以不同方式控制多个元素

CSS Hover control multiple elements differently

html

css

hover