Question

我有以下CSS：

.contact{
  padding:1rem;
  background:#023B6C;
  padding:1rem;
  position:fixed;
  right:-20px;
  top:27%;
  z-index:99;
  border-radius:5px 5px 0 0;
  border:2px solid #fff;
  transform:rotate(-90deg);
  transition:all .5 ease;
}

.contact a{
  font-size:1.2rem;
  color:#fff;
  transition:all .5 ease;
}

.contact a:hover{
  color:#E5E5E5;
  font-size:1.25rem;
}

.contact:hover{
  padding:1.2rem;
}

控制以下HTML：

<div class="contact">
     <a href="#">Contact</a>
</div>

这是做什么，当鼠标悬停在div上时，div稍微扩展，文本也会扩展。但是，如果一个人没有直接悬停在文本上，则文本不会改变，只有div。

如何修改代码，以便在div悬停但文本不是时，div内的链接会发生变化？我尝试将所有代码放在.contact:hover中，但由于链接是由我的css的默认样式设置的，因此无法正常工作。

Here is a jsFiddle我的代码。

Answer 1

从右到左思考......

任何，a - 在悬停的.content内部...

所以

（从右到左）

.contact:hover  a {

}

但是，我会把整个事情变成一个锚点。让它在悬停时阻挡并设计整个风格。

将DIV悬停在DIV内的效果链接

1 个答案: