时间戳

首页 > 解决方案 > 在锚链接悬停时更改 DIV

html - 在锚链接悬停时更改 DIV

问题描述

我试图在文档中悬停任何锚链接时更改 div。它仅在它不在任何其他容器内时才有效。

无论如何可以在通常的页面布局（内部正文> divs）中进行这项工作吗？

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}
  
<div> <!--If you remove this DIV, it works-->
<a href="#" class="circle">Circle</a>
</div>

<div id="circle"></div>

标签： htmlcss

解决方案

#circle {
  position: fixed;
  border-radius: 50%;
  z-index: 5;
  height: 32px;
  width: 32px;
  background-color: #0081ff;
  pointer-events: none;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
  transform: translate3d(0, 0, 0);
}
  
.circle:hover ~ #circle  {
  background-color: transparent;
  box-shadow: 0 0 0 3px #E91E63;
  transform: scale(1) translate3d(0, 0, 0);
}
<div  class="circle"> <!--If you remove this DIV, it works-->
<a href="#">Circle</a>
</div>

<div id="circle"></div>

推荐阅读